本文介绍: 实现思路:1.通过jquery 监听div滚动事件设置其他div同时滚动 2.为不是多个同时滚动div滚动监听事件互相重复影响通过鼠标移动到哪个div上时使用哪个div进行滚动监听,其他div不进行滚动监听。&lt;!DOCTYPE html&gt;&lt;html lang=”en“&gt;<head&gt; <meta charset=”UTF-8″&gt; <title&gt;HTML 两个div滚动条同时滚动…

 实现思路

        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>

 

原文地址:https://blog.csdn.net/qq_35758320/article/details/123060214

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任

如若转载,请注明出处:http://www.7code.cn/show_41006.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注