Question

在构建我的移动网站时，我不得不将这些属性添加到我的身体中以消除多余的空白：

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上，反之亦然，这确实解决了我的问题，但是空白返回。我已经在网上看了，但是我似乎无法找到关于这个问题的任何内容。

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

Answer 1

通过移除height上的body属性来计算出来，这相当于将height设置为auto。

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

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

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

Answer 2

我认为这可能是由

引起的

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

尝试通过

更改它们

overflow: auto;

Answer 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>

JQuery ScrollTop无法使用溢出

3 个答案: