javascript - 如何使用 jquery 的滚动功能

Question

我想在窗口滚动到某个位置时执行某些操作

我的 JS FIDDLE:https://jsfiddle.net/to1uuvnb/1/

html

 <div id="target">
 </div>

CSS

#target
{
 min-height:1000px;
 max-width:300px;
 background-color:#eee;
}

js

$('#target').scroll(function(){
  if($(this).scrollTop() > 10)
 {
  alert('');
 }
});

Answer 1

#target 不可滚动。将您的#target 放入可滚动容器(只是另一个div)中，然后检测其上的滚动。这是一个 fiddle ... https://jsfiddle.net/to1uuvnb/2/

这是 fiddle 代码...

HTML

<div id="container">
    <div id="target">
    </div>
</div>

CSS

#container
{
    height:100px;
    max-width:300px;
    background-color:#eee;
    overflow: auto;
    border:2px solid red;
    padding:10px;
}

#target
{
    min-height:1000px;
    max-width:300px;
    background-color:#eee;
    border:2px solid blue;
}

JavaScript

$('#container').scroll(function (event) {
    var scroll = $('#container').scrollTop();
    if (scroll > 300) /* after a certain point, do something... */
        alert(scroll);
});