两个div滚动条同步简单实现

最新推荐文章于 2023-08-18 11:59:45 发布
最新推荐文章于 2023-08-18 11:59:45 发布
阅读量1.2w 收藏 5
点赞数 1
CC 4.0 BY-SA版权
分类专栏： Html JavaScript Css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sscrazy/article/details/8717049
本文介绍了一种实现网页中两个滚动条同步的技术方案。通过简单的HTML和JavaScript代码，实现了横向及竖向滚动条的同步效果，便于同时查看多个相关联的内容区域。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

横向滚动条同步：

<div id="div1" style="width:500px; overflow:scroll;"  onscroll="document.getElementById('div2').scrollLeft = this.scrollLeft;">

<div style="width:800px; height:50px;"></div>

</div>


<div id="div2" style="width:500px; overflow:scroll;"  onscroll="document.getElementById('div1').scrollLeft = this.scrollLeft;">

<div style="width:800px; height:50px;"></div>

</div>


竖向滚动条同步：

<div id="div1" style="width:500px; overflow:scroll;"  onscroll="document.getElementById('div2').scrollTop = this.scrollTop;">

<div style="width:800px; height:50px;"></div>

</div>


<div id="div2" style="width:500px; overflow:scroll;"  onscroll="document.getElementById('div1').scrollTop = this.scrollTop;">

<div style="width:800px; height:50px;"></div>

</div>


【demo】-两个div同步滚动
jieweiwujie的博客
11-04 335
两个div同步滚动
实现两个div并排显示并各独立滚动
weixin_47902184的博客
12-19 886
实现两个div并排显示并各独立滚动。
vue实现两个区域滚动条同步滚动
qq_54126505的博客
03-24 2159
vue实现两个区域滚动条同步滚动
让页面上两个div中的滚动条(滑块)同步运动示例
12-04
使用JQuery添加如下代码 代码如下: $(‘#sourceDiv’).scroll( function() { $(‘#targetDiv’).scrollTop($(this).scrollTop()); $(‘#targetDiv’).scrollLeft($(this).scrollLeft()); }); $(‘#targetDiv’).scroll( function() { $(‘#sourceDiv’).scrollTop($(this).scrollTop()); $(‘#sourceDiv’).scrollLeft($(this).scrollLeft()); });
两个div同步滚动
weixin_42979149的博客
06-28 4733
html: <div id="div1"> // code... </div> <div id="div2"> // code... </div> 首先一开始我想的是两个div的scroll同时去修改另一个div的scrollTop，但这样会导致卡顿，滚动非常慢，这是由于相互调用导致的 如下： $("#div1").scroll(fun...
HTML 两个div滚动条同时滚动
蔡燃的博客
02-22 2934
实现思路： 1.通过jquery 监听div滚动事件来设置其他div同时滚动 2.为不是多个同时滚动div的滚动监听事件互相重复影响，通过当鼠标移动到哪个div上时使用哪个div进行滚动监听，其他div不进行滚动监听。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HTML 两个div滚动条同时滚动...
js_控制两个滚动条同时滚动
最新发布
qq_45104829的博客
08-18 896
类似csdn，md这种左右滚动条联动的效果。
实现两个div滑动时联动（滑动任意一个，其他一个跟着动）
https://shixuebin.gitee.io/hexo-blog/
07-21 1463
【代码】实现两个div滑动时联动（滑动任意一个，其他一个跟着动）
原生JS控制多个滚动条同步跟随滚动效果
11-29
总之，实现原生JS控制多个滚动条同步跟随滚动效果，主要依赖于`scrollTop`属性、滚动事件监听以及事件触发的控制。通过理解这些基础概念和技巧，我们可以构建出更丰富的用户体验。在实际项目中，可以根据具体需求...
详解如何用div实现自制滚动条
09-24
为了使自制滚动条能够动态响应用户的操作，我们需要监听两个关键事件：鼠标滚轮滚动和鼠标拖拽滚动条。对于鼠标滚轮事件，我们使用`'mousewheel'`事件监听器，根据`e.deltaY`的值来改变视口的`scrollTop`，然后根据...
两个div同时滑动
萧枫的专栏
07-06 3824
$(function(){ debugger; $('#sourceDiv').scroll( function() { $('#targetDiv').scrollTop($(this).scrollTop()); $('#targetDiv').scrollLeft($(this).scrollLeft()); }); $('#targetDiv').scroll( f
两个div同时滚动
weixin_30467087的博客
10-29 462
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <meta http-equiv="Con...
div同步滚动的方式
weixin_42470796的博客
02-16 1591
先来放图看效果 在一切开始前我们先来测试原生的js实现的方法 1.新建一个test.html文件 要求在html中创建两个div，同等固定高度的，并随意填充任意的text,p div等大量超出div的高度。 2.需求分析 我们的目的是尽量左边滚动右边同步滚动，而右边滚动左边却不滚动。代码如下。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <
如何让页面上两个div中的滚动条(滑块)同步运动？
小妖的专栏
08-07 2832
使用JQuery添加如下代码$('#sourceDiv').scroll( function() { $('#targetDiv').scrollTop($(this).scrollTop()); $('#targetDiv').scrollLeft($(this).scrollLeft()); }); $('#targetDiv').scroll( function() { $('#sou
html如何添加流动窗口,css如何实现div随滚动条移动？
weixin_39669761的博客
06-28 993
通常为了说明与HTML网页设计语言中的表格(table)定位方式的区别，因为XHTML网站设计标准中，不再使用表格定位技术，而是采用css+div的方式实现各种定位。那么该如何实现div随滚动条移动。使用css的定位属性position，设其值为fixed即可，该属性是将指定元素绝对定位于窗体，使用left，right，top和bottom属性来设置偏移于窗体原点的位置。示例：.mainBox{m...
两个div 同步滚动 兼容safari
weixin_30536513的博客
07-17 170
<style type="text/css"> div{ overflow-x:scroll; width:10%; height:10%; border:1px blue solid; position:relative; } </style> &lt...
html 多个div滑动特效,如何实现多个div同时滚动（3个以上）
weixin_35025310的博客
06-09 1543
问题描述有5个宽度相同的div纵向排列，都会有内容横向溢出。想要实现不论在某一div进行拖动，都能使得其他div能同步滚动。尝试以及问题有尝试过如下方法将div1的scrollLeft值与div0的scrollLeft绑定起来，依次绑定，div2和div1,div3和div2...最后将div4和div0的scrollLeft彼此绑定，初看是木有问题能够实现同步横向滚动，但是滚动速度过快就会出现卡...
两个并列的div，可以分别滑动
青阳的博客
02-06 5236
两个红色的框，为其定义一个父级div，定位方式为position：absolute（fixed），里面定义两个子div，样式为左浮动， overflow-y: auto;   overflow-x: hidden;     -webkit-overflow-scrolling: touch;        height: 100%;        float: left;即可实现。...
实现多个DIV滚动条的联动控制技巧
下面是一个简单的示例代码，展示了如何实现两个DIV滚动条的联动： ```javascript // 获取所有需要联动的DIV元素 var div1 = document.getElementById('div1'); var div2 = document.getElementById('div2'); // ...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值