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>

HTML 两个div滚动条同时滚动相关推荐

vue实现两个区域滚动条同步滚动
项目开发中,遇到一个比较两个form差异的需求,但当item过多就需要滚动条,这里就用到了滚动条同步的地方,其实原理和git的差异比较差不多,这里来做一下分析.这是效果图要点分析: 其实主要是通过r ...
vue中两个iframe滚动条同步滚动问题总结
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录一.问题分析二.记录爬坑过程 1.获取dom 错误操作:在mounted里面this.$nextTick,如果场景里面有t ...
js判断div滚动条是否滚动到底部
1.设置div固定高度,并且设置为内部超出可滚动 2.获取div标签,并获取div滚动距离顶部的高度 3.获取div的高度,如果没有给div设置高度可获取视图窗口的高度 4.获取div标签滚动高度 4 ...
两table水平滚动条级联滚动(同步滚动)。 table1放标题，table2放内容。
//table1=head和table2=body水平滚动条级联滚动 $(document).ready(function () { $("#bodyPanel").scroll( ...
DIV滚动条自动滚动到最底部的两种方法
查看原文方法1 function updateScroll(){var element = document.getElementById("divId");element.sc ...
vue 监听某div滚动条的滚动事件
监听此div , 定义ref <div class="productSec" ref="rightContent" @mousewheel="s ...
两个div滚动条同步简单实现
横向滚动条同步: <div id="div1" style="width:500px; overflow:scroll;" οnscrοll=" ...
vue 移动端监听div滚动条的滚动事件
第一步:监听div,定义ref <div class="accpdfbox" ref="rightContent" @scroll="scroo ...
jquery 让div滚动条自动滚动到最下面
2019独角兽企业重金招聘Python工程师标准>>> function changeHight(){ var beforeHeight = $(".interaction ...

HTML 两个div滚动条同时滚动

实现思路：

HTML 两个div滚动条同时滚动相关推荐

最新文章

热门文章