HTML 两个div滚动条同时滚动_两个div同步滚动-CSDN博客

本文链接：https://blog.csdn.net/qq_35758320/article/details/123060214

实现思路：

1.通过jquery 监听div滚动事件来设置其他div同时滚动

2.为不是多个同时滚动div的滚动监听事件互相重复影响，通过当鼠标移动到哪个div上时使用哪个div进行滚动监听，其他div不进行滚动监听。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML 两个div滚动条同时滚动</title>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body style="position: absolute;width: 100%;height: 100%;margin: 0;padding: 0">
<div style="position: absolute;top:0;left:0;width: 40%;height: 100%">
    <div id="data1" style="position: absolute;height:80%;width:100%;overflow: scroll;border: black 1px solid"></div>
</div>
<div style="position: absolute;top:0;left:50%;width: 40%;height: 100%">
    <div id="data2" style="position: absolute;height:80%;width:100%;overflow: scroll;border: black 1px solid"></div>
</div>
<script>
    $(function () {
        let i = 0;
        let html1 = [];
        let html2 = [];
        while (i<300) {
            i++;
            html1.push(`<p style="color: #3B9C9C;white-space:nowrap;">${i} HTML 两个div滚动条同时滚动 ${i} HTML 两个div滚动条同时滚动 ${i} HTML 两个div滚动条同时滚动 ${i} HTML 两个div滚动条同时滚动 ${i} HTML 两个div滚动条同时滚动</p>`);
            html2.push(`<p style="color: #00FF00;white-space:nowrap;">${i} HTML 两个div滚动条同时滚动 ${i} HTML 两个div滚动条同时滚动 ${i} HTML 两个div滚动条同时滚动 ${i} HTML 两个div滚动条同时滚动 ${i} HTML 两个div滚动条同时滚动</p>`);
        }
        $("#data1").append(html1);
        $("#data2").append(html2);


        //两个div滚动条同时滚动
        $("#data1").mouseover(function () {
            $(this).on("scroll", function () {
                console.log(1)
                $("#data2").scrollTop($(this).scrollTop()); // 纵向滚动条
                $("#data2").scrollLeft($(this).scrollLeft()); // 横向滚动条
            });
        }).mouseout(function () {
            $(this).unbind("scroll");
        });
        $("#data2").mouseover(function () {
            $(this).on("scroll", function () {
                console.log(1)
                $("#data1").scrollTop($(this).scrollTop()); // 纵向滚动条
                $("#data1").scrollLeft($(this).scrollLeft()); // 横向滚动条
            });
        }).mouseout(function () {
            $(this).unbind("scroll");
        });
    });
</script>
</body>
</html>