Question

您好我正在寻找一种方法来检测用户在触发事件之前向下滚动网页的数量（实时）。

我遇到过这个代码，这是我追求的东西，但是我需要收集整个页面而不仅仅是div。我无法将div扩大到整个页面的大小，因为它需要在iPad / iPhone上滚动等。

<head>
    <script type="text/javascript">
        function OnScrollDiv (div) {
            var info = document.getElementById ("info");
            info.innerHTML = "Horizontal: " + div.scrollLeft
                            + "px<br/>Vertical: " + div.scrollTop + "px";
        }
    </script>
</head>
<body>
    <div style="width:100px;height:200px; overflow:auto;" onscroll="OnScrollDiv (this)">
        Please scroll this field!
        <div style="height:300px; width:100px; background-color:#ccc;"></div>
        Please scroll this field!
        <div style="height:300px; width:100px; background-color:#ccc;"></div>
        Please scroll this field!
    </div>
    <br /><br />
    Current scroll amounts:
    <div id="info"></div>
</body>

我可以在http://www.nikebetterworld.com/找到我所追求的一个例子。非常感谢任何帮助。

编辑：它位于页面底部！

Answer 1

您需要在jQuery中查找的是scroll()事件以及scrollTop()方法。您可以使用它们来发现用户滚动页面的距离，并根据值显示或隐藏内容。

$(window).scroll(function() {
   var currentPosition = $(this).scrollTop();
   // do something with currentPosition...
});

您也可以将此方法应用于已应用overflow: scroll的单个元素，以及window对象，如本例所示。

Here's a fiddle to see it in action

可滚动像素跟踪

1 个答案: