实现思路:
1.通过jquery 监听div滚动事件来设置其他div同时滚动
2.为不是多个同时滚动div的滚动监听事件互相重复影响,通过当鼠标移动到哪个div上时使用哪个div进行滚动监听,其他div不进行滚动监听。
$(function () {
let i = 0;
let html1 = [];
let html2 = [];
while (i<300) {
i++;
html1.push(`
${i} HTML 两个div滚动条同时滚动 ${i} HTML 两个div滚动条同时滚动 ${i} HTML 两个div滚动条同时滚动 ${i} HTML 两个div滚动条同时滚动 ${i} HTML 两个div滚动条同时滚动
`);html2.push(`
${i} HTML 两个div滚动条同时滚动 ${i} HTML 两个div滚动条同时滚动 ${i} HTML 两个div滚动条同时滚动 ${i} HTML 两个div滚动条同时滚动 ${i} HTML 两个div滚动条同时滚动
`);}
$("#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");
});
});
相关文章
发表评论