如何检测每个 div 而不是整个窗口的滚动？答案

【问题标题】：How to detect the scrolling of each div and not the entire window?如何检测每个 div 而不是整个窗口的滚动？
【发布时间】：2016-10-26 21:34:07
【问题描述】：

我创建了一个 html 页面，其中窗口不滚动，但窗口内的 div 滚动并具有滚动条。我已经搜索并找到了这个 jquery 来检测窗口的滚动并找到每个 div 的滚动位置。因此，我对其进行了修改以检测左侧 div 的滚动，但它似乎不起作用。

到目前为止我得到的 jquery 脚本：

$("#le").scroll(function() {
        console.log("Entered");
        alert("Working!");
        var height = $("#le").scrollTop()
        console.log(height);
    });

这是一个包含基本 html 的简单 JSFiddle：https://jsfiddle.net/8q5e4u8q/

感谢任何帮助。谢谢。

更新：找到了解决方案。显然，将 script 标签移到 body 标签下面就可以了！感谢所有提示和帮助。干杯！

【问题讨论】：

你的小提琴里面没有 jquery。添加到 jquery 的链接后，它工作得很好。
JSFiddle 很方便，但最好有一个完整的可验证的问题示例
我一直在制作一个完整的 jsfiddle，并一直在四处寻找这个 @you.know.nothing 哈哈简单的解决方案，应该看起来更好。
@AngelofDemons：让我们看看 OP 是否真的在寻找这个：P
有趣的是我链接了 Jquery，它工作得很好。但奇怪的是，它不适用于我的本地 html 文件。我已将 jquery 链接如下：

标签： javascript jquery html css

【解决方案1】：

编辑：如 cmets 所述：
你的小提琴里面没有 jquery。添加到 jquery 的链接后，它工作得很好。

我不完全知道如果我正确理解你的要求会怎样。但我查看了here 并找到了this 解决方案并编辑为this

现在，如果您在 first 框中滚动，它会发出警报_正在滚动，但如果您在第二个框中滚动，它会不提醒滚动您可能必须更改名称等，但应该可以正常工作。

$(".box").scroll(function() {
	alert('scrolling');
});

    div.box, .second-box {
      width: 200px;
      height: 200px;
      overflow: scroll;
    }

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class="box">
         All your text content...<br>
         All your text content...<br>
         All your text content...<br>
         All your text content...<br>
         All your text content...<br>
         All your text content...<br>
         All your text content...<br>
         All your text content... <br>
         All your text content...<br>
         All your text content...<br>
         All your text content...<br>
         All your text content...<br>
         All your text content...<br>
         All your text content...<br>
         All your text content...<br>
         All your text content...<br>
         All your text content...<br>
         All your text content...
    </div>
    <div class="second-box">
    lalaa
    alalaa<br />
    our text content...<br>
         All your text content...<br>
         All your text content...<br>
         All your text content...<br>
         All your text content...<br>
         All your text content... <br>
         All your text content...<br>
         All your text content...<br>
         All your text content...<br>
         All your text content...<br>
         All your text content...<br>
         All your text content...<br>
         All your text content...<br>
         All your text content...<br>
         All your text content...<br>
         All your text content...
    </div>

【讨论】：