本文介绍: 实现思路:1.通过jquery 监听div滚动事件来设置其他div同时滚动 2.为不是多个同时滚动div的滚动监听事件互相重复影响,通过当鼠标移动到哪个div上时使用哪个div进行滚动监听,其他div不进行滚动监听。<!DOCTYPE html><html lang=”en“><head> <meta charset=”UTF-8″> <title>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进行投诉反馈,一经查实,立即删除!
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。