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

最新推荐文章于 2024-08-20 18:11:05 发布
最新推荐文章于 2024-08-20 18:11:05 发布
阅读量4.4k 收藏 3
点赞数 1
分类专栏： javascript 文章标签： 滚动条

横向滚动条同步：

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

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

</div>


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

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

</div>


竖向滚动条同步：

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

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

</div>


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

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

</div>

我是真北鼻
关注
专栏目录
【demo】-两个div同步滚动
jieweiwujie的博客
11-04 285
两个div同步滚动
js实现两个元素滚动条同步的方法
Demonre的博客
02-17 2981
目标 同步显示两个标签元素的内容，需要同步滚动条。 原理 监听元素对象的滚动条事件 var box = document.getElementById('box') // 获取id为box的元素 box.onscroll = function() { // box的滚动条滚动时触发 } 滚动条的属性 // 垂直滚动条 box.scrollHeight // 可滚动的高度 box....
两个div同步滚动
weixin_42979149的博客
06-28 4627
html: <div id="div1"> // code... </div> <div id="div2"> // code... </div> 首先一开始我想的是两个div的scroll同时去修改另一个div的scrollTop，但这样会导致卡顿，滚动非常慢，这是由于相互调用导致的 如下： $("#div1").scroll(fun...
HTML 两个div滚动条同时滚动
蔡燃的博客
02-22 2587
实现思路： 1.通过jquery 监听div滚动事件来设置其他div同时滚动 2.为不是多个同时滚动div的滚动监听事件互相重复影响，通过当鼠标移动到哪个div上时使用哪个div进行滚动监听，其他div不进行滚动监听。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HTML 两个div滚动条同时滚动...
element-plus 两个或多个table同步滚动条联动
最新发布
qq_21579949的博客
08-20 320
element-plus两个或多个表格左右滚动条滑动同步实现逻辑如下。 注：上下滚动同步联动一样的逻辑 table节点添加scrollTop赋值即可。
实现两个div滑动时联动（滑动任意一个，其他一个跟着动）
https://shixuebin.gitee.io/hexo-blog/
07-21 1204
【代码】实现两个div滑动时联动（滑动任意一个，其他一个跟着动）
让页面上两个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()); });
js_控制两个滚动条同时滚动
qq_45104829的博客
08-18 706
类似csdn，md这种左右滚动条联动的效果。
两个div同时滑动
萧枫的专栏
07-06 3780
$(function(){ debugger; $('#sourceDiv').scroll( function() { $('#targetDiv').scrollTop($(this).scrollTop()); $('#targetDiv').scrollLeft($(this).scrollLeft()); }); $('#targetDiv').scroll( f
两个div同时滚动
weixin_30467087的博客
10-29 435
<!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...
原生JS控制多个滚动条同步跟随滚动效果
11-29
总之，实现原生JS控制多个滚动条同步跟随滚动效果，主要依赖于`scrollTop`属性、滚动事件监听以及事件触发的控制。通过理解这些基础概念和技巧，我们可以构建出更丰富的用户体验。在实际项目中，可以根据具体需求...
使两个DIV滚动条同时滚动
johncools的博客
08-09 2254
问题提出：http://www.cnblogs.com/trueben/archive/2006/07/24/458370.html见下面的例子：滚动左边的DIV时，右边的DIV同步滚动。原理很简单，在左边的DIV的onscroll事件中，设置右边的DIV的scrollTop与左边的相同即可。  代码如下：html>    head>style>    DIV {width:200;heigh
div同步滚动的方式
weixin_42470796的博客
02-16 1454
先来放图看效果 在一切开始前我们先来测试原生的js实现的方法 1.新建一个test.html文件 要求在html中创建两个div，同等固定高度的，并随意填充任意的text,p div等大量超出div的高度。 2.需求分析 我们的目的是尽量左边滚动右边同步滚动，而右边滚动左边却不滚动。代码如下。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <
实现两个div并排显示并各独立滚动
weixin_47902184的博客
12-19 808
实现两个div并排显示并各独立滚动。
如何让页面上两个div中的滚动条(滑块)同步运动？
小妖的专栏
08-07 2785
使用JQuery添加如下代码$('#sourceDiv').scroll( function() { $('#targetDiv').scrollTop($(this).scrollTop()); $('#targetDiv').scrollLeft($(this).scrollLeft()); }); $('#targetDiv').scroll( function() { $('#sou
vue实现两个区域滚动条同步滚动
qq_38519358的博客
07-14 8687
项目开发中，遇到一个比较两个form差异的需求，但当item过多就需要滚动条，这里就用到了滚动条同步的地方，其实原理和git的差异比较差不多，这里来做一下分析。
html如何添加流动窗口,css如何实现div随滚动条移动？
weixin_39669761的博客
06-28 950
通常为了说明与HTML网页设计语言中的表格(table)定位方式的区别，因为XHTML网站设计标准中，不再使用表格定位技术，而是采用css+div的方式实现各种定位。那么该如何实现div随滚动条移动。使用css的定位属性position，设其值为fixed即可，该属性是将指定元素绝对定位于窗体，使用left，right，top和bottom属性来设置偏移于窗体原点的位置。示例：.mainBox{m...
两个div 同步滚动 兼容safari
weixin_30536513的博客
07-17 153
<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 1460
问题描述有5个宽度相同的div纵向排列，都会有内容横向溢出。想要实现不论在某一div进行拖动，都能使得其他div能同步滚动。尝试以及问题有尝试过如下方法将div1的scrollLeft值与div0的scrollLeft绑定起来，依次绑定，div2和div1,div3和div2...最后将div4和div0的scrollLeft彼此绑定，初看是木有问题能够实现同步横向滚动，但是滚动速度过快就会出现卡...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值