JQuery ScrollTop 不适用于溢出答案

【问题标题】：JQuery ScrollTop not working with OverflowJQuery ScrollTop 不适用于溢出
【发布时间】：2020-06-04 03:01:33
【问题描述】：

在构建我的移动网站时，我必须将这些属性添加到我的正文中以消除多余的空格：

html,body
{
    width: 100%;
    margin: 0px;
    padding: 0px;
    overflow-y: scroll;
    overflow-x: hidden; 
    -webkit-overflow-scrolling: touch;
}

但是，我的 jQuery scrollTop 函数，关于视差和导航栏，现在不能工作。这些功能不适用于移动设备。

$n = ".navbar";
$(window).scroll(function(){
    if($(window).scrollTop() > 300){
        $($n).css("background-color", "rgba(255,255,255,.2)");
    } else {
        $($n).css("background-color", "transparent");
    }
});

我尝试从正文中删除溢出，并将其仅保留在 HTML 上，反之亦然，这确实解决了我的问题，但是空白返回。我在网上查看过，但似乎找不到任何关于此问题的信息。

如果您想查看该网站，URL 是http://studysesh.us。请记住，这才刚刚开始，目前主页是唯一的页面。谢谢。

【问题讨论】：

mhm.... 当我将窗口缩小到移动分辨率时，控制台中不再显示任何内容。我会假设这个-webkit-overflow-scrolling: touch; 是原因。（使用谷歌开发工具在 vivaldi 中进行测试）
是的。我添加了一个媒体查询来消除溢出，除非窗口大致是移动大小。我不知道为什么它不拿起滚动。我注意到的是，当您弹起浏览器（意味着在顶部或底部）时，滚动确实会记录下来
另一件奇怪的事。如果向下滚动然后将窗口缩小到移动分辨率，就可以了。如果您现在稍微拉伸它，窗口将回到顶部。如果再次缩小它，它将回到最后一个位置。这就像某些东西被重置或者就像你有两个不同的文件......奇怪
@TCHdvlp 你在说什么元素？我不太明白你的意思。
我只是向下滚动然后播放窗口尺寸。我说的是整个窗口。

标签： jquery html css scroll

【解决方案1】：

通过删除body 上的height 属性来解决这个问题，这实际上相当于将height 设置为auto。

body {
   height: auto;
   max-width: 100%;
}

当您将值显式设置为body 的height 时，滚动其上的任何区域实际上会触发body 本身内部的scroll 事件，而不是window。在我看来，这是scroll 事件没有被触发的问题的根源。

同时，overflow-y: scroll; 在您的情况下是多余且不必要的，因为当视口的宽度显着减小时，它会在body 上强制出现丑陋的滚动条。

【讨论】：

【解决方案2】：

我认为这可能是由于

overflow-y: scroll;
overflow-x: hidden;

尝试改变它们

overflow: auto;

【讨论】：

不，试过了。滚动仍然不起作用，控制台没有任何日志。

【解决方案3】：

我遇到了同样的问题，scrollTop() 不起作用。原来是因为我在页面顶部有一些内联样式。 scrollTop() 似乎需要某种 HTML 结构，因此将 <style> 标记作为页面上的第一个元素会破坏它。这是修复前的样子：

<style>
    .my-class {
        ...
    }
</style>
<!doctype html>
<html lang="en">
    <head>
        ...
    </head>
</html>

我将内联样式移到了<head> 标记中，从而解决了这个问题。以下是修复后的样子：

<!doctype html>
<html lang="en">
    <head>
        <style>
            .my-class {
                ...
            }
        </style>
    </head>
</html>

【讨论】：