使用jquery在特定DIV中滚动事件

时间:2015-02-03 13:04:11

标签: javascript jquery scroll

我正在寻找的是当通过键盘滚动发生在特定div上时触发的事件。我已经浏览并试图实现几个代码片段和插件来实现这一点,但它没有帮助我。当我使用mousewheel事件和scrollTop函数通过鼠标在特定div中滚动时,我已经实现了相同的功能。

我想要的是当用户在特定div中滚动时,应该将用户导航到另一个div / section。

带图像的第一个屏幕位于div上,我在鼠标滚轮上实现了scrollTop。我想通过键盘滚动事件实现相同的功能

您可以看到实时网站http://www.eccentricengine.com/Demo/eccentric/,并查看我尝试实施的示例的来源。JS中也存在冲突的可能性。

3 个答案:

答案 0 :(得分:1)

看一个小的演示,它可以帮助你。点击div内部,然后按下或向上键盘。



$("span").hide();
$(".box").scroll(function() {
    $("span").css( "display", "inline" ).fadeOut( "slow" );
});

div.box{
  width: 200px;
  height: 150px;
  overflow: scroll;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
     text here<br>
     text here<br>
     text here<br>
     text here<br>
     text here<br>
     text here<br>
     text here<br>
     text here <br>
     text here<br>
     text here<br>
     text here<br>
     text here<br>
     text here<br>
     text here<br>
     text here<br>
     text here<br>
     text here<br>
     text here
</div>
<span>Scrolling</span>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

也许我弄错了你,但你可以为滚动事件注册一个事件监听器。所以你不需要键盘,鼠标等不同的事件......

这是一个简单的代码段:

document.querySelector('.container').addEventListener('scroll', function() {
    console.log('scroll event fires');
});
.container {
    height: 100px;
    overflow-y: auto;
    border: 1px solid #f00;
}

.content {
    height: 1000px;
    background-color: #6Df;
}
<div class="container">
    <div class="content">
        Scroll me
    </div>
</div>

答案 2 :(得分:0)

谢谢大家的帮助..我用0,1的标志解决了我的问题。 根据光标所在的div设置标志。