【问题标题】:Scroll Event in a particular DIV with jquery使用 jquery 在特定 DIV 中滚动事件
【发布时间】:2015-02-03 13:04:10
【问题描述】:

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

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

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

您可以查看直播站点http://www.eccentricengine.com/Demo/eccentric/ 并查看我尝试实现的示例的来源。JS中也存在冲突的可能性。

【问题讨论】:

    标签: javascript jquery scroll


    【解决方案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>

    【讨论】:

    • 谢谢..但我尝试了很久,但由于一些冲突,它似乎不起作用..再次感谢您的回复。
    【解决方案2】:

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

    这是一个简单的sn-p:

    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>

    【讨论】:

      【解决方案3】:

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

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2021-08-18
        • 2022-10-07
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多