jquery - 在一个 div 内滚动会自动触发滚动到其他 div 中的相关段落？

Question

我正在从事一个元素，该元素涉及三个包含一些文本段落的可滚动 div。文本中的某些段落可以松散地相互关联。我想要发生的是，如果读者滚动到第一个 div 中的特定段落，其他两个 div 会自动滚动到它们包含的文本中的相关段落。这样，三个段落将同时显示，而读者可以通过向下滚动自行决定他想进一步探索哪个 div/文本。这可以通过使用 JQuery 插件来实现吗？我该如何实现它？

非常感谢您!

编辑:我有一些 HTML/CSS 的基础知识，但我是 jQuery 的新手。

Answer 1

使用 jQuery(无需插件)这是很有可能的，为此您可能需要处理每个 div 的 onscroll 事件。

这是一个简单的 JSFiddle演示以下代码:

$(document).ready(function() {
    $('.ScrollingDiv').scroll(function() {
        var CurScrollHeight = $(this).scrollTop();
        //alert('in scroll');
        $('.ScrollingDiv').each(function() {
            //alert('in each');
            $(this).scrollTop(CurScrollHeight);
        });
    });
});

此代码将处理程序应用于页面上具有 ScrollingDiv 类的每个元素的 onscroll 函数，当其中一个元素滚动时，它将找到所有其他元素并将滚动高度设置为一样。

根据您的情况，您需要想出一种方法来确定查看每个 div 中的段落所需的滚动高度，即第一个 div 可能是 200px 高度，第二个可能是 400px 高度，第三个可能是 150px高度等...

完成后，只需更改我提供的代码即可满足您的功能。您可能需要设置 div 的 ID 并找到各个元素，并为您需要的段落获取正确的高度。