js如何实现两个滚动条同步滚动

最新推荐文章于 2024-04-28 15:42:08 发布
最新推荐文章于 2024-04-28 15:42:08 发布
阅读量8.9k 收藏 16
点赞数 9
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44840212/article/details/93761424
版权

如下图所示：实现两个区域竖向滚动条同步滚动
在这里插入图片描述
页面结构布局和样式如下：（为了一张截图展示，结构里p标签都有删减，可随意添加能出滚动条就可以）
在这里插入图片描述
在这里插入图片描述
下图是js代码：代码没几行，注意下边注释，涉及同步滚动比例计算
在这里插入图片描述注释：1、scale为滚动条滚动比例（左边可滚动最大高度/右边可滚动最大高度）
2、clientHeight和offsetHeight均可获取元素高度，这里用clientHeight是因为这个属性不包含横向滚动条的高度
3、scrollHeight是left/right里内容的高度，它和(.left/.right div).clientHeight可能会有区别（例如此例子中p标签有margin值上下都为16px），那么clientHeight不会把最上边的margin-top和最下边的margin-bottom计算进去导致比scrollHeight高度少32px, .left/.right div真实占用空间是包含上下margin的。（当然你也可以用其他方法解决这个高度问题）
4、left/right的mouseover事件来开启/停止当前鼠标所在区域的scroll事件，因为同步滚动只能让一边跟随另一边滚动而滚动，否则两边同时滚动同时改变另一边的scroll, 如果两边不一样高就会导致滚动条缓慢逆流的现象，滚动条拉下来它自己又逆流回去。

此文章是在见解前辈大佬文章的基础上，自己编写项目中需要的精简功能，不够全面望谅解，谢谢！

跳恰恰的夫子
关注
  • 9
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
原生JS控制多个滚动条同步跟随滚动
Quiet-Night的博客
12-21 1万+
原生JS控制多个滚动条同步跟随滚动
js实现两个元素滚动条同步的方法
Demonre的博客
02-17 2868
目标 同步显示两个标签元素的内容，需要同步滚动条。 原理 监听元素对象的滚动条事件 var box = document.getElementById('box') // 获取id为box的元素 box.onscroll = function() { // box的滚动条滚动时触发 } 滚动条的属性 // 垂直滚动条 box.scrollHeight // 可滚动的高度 box....
JavaScript实现两个滚动条同步滚动
qq_41180882的博客
07-25 914
【代码】JavaScript实现两个滚动条同步滚动。
vue实现滚动条联动（一个滚动条控制两个或多个）
最新发布
编程不过是一门失传艺术的别名，这门艺术的名字叫做“思考”
04-28 557
这样就实现了两边表格的滚动条联动，有多个表格，也是同样的方法，使多个表格的scrollTop和scrollLeft相同就可以了。
原生微信小程序，scroll-view的使用，一屏两个滚动区域，scroll-y（纵向滚动）
qq_40893035的博客
09-01 5114
原生微信小程序，scroll-view的使用，一屏两个滚动区域，scroll-y（纵向滚动） 这个会简单很多 结构层 <view class="container"> <!-- scroll-view标签在使用时，可以当做普通的view标签使用，可以设置很多属性改变XY轴滚动 --> <!-- 左侧滚动栏 --> <!-- view{$}*100可以一次打印1-100内容的view标签 --> <scroll-view scroll-y
JS实现拖动事件，滚轴滑动与拖动同步事件
F14867的博客
11-25 782
JS实现鼠标啊拖动内容，鼠标滚轴滑动与拖动同步
vue实现两个区域滚动条同步滚动
qq_38519358的博客
07-14 8335
项目开发中，遇到一个比较两个form差异的需求，但当item过多就需要滚动条，这里就用到了滚动条同步的地方，其实原理和git的差异比较差不多，这里来做一下分析。
原生JS控制多个滚动条同步跟随滚动效果
11-29
在一些支持用 markdown 写文章的网站，后台写作页面，一般...本文要探讨的是，当这两个容器元素的内容都超出了容器高度，即都出现了滚动框的时候，如何在其中一个容器元素滚动时，让另外一个元素也随之滚动。 DOM 结构
让页面上两个div中的滚动条(滑块)同步运动示例
12-04
使用JQuery添加如下代码 代码如下: $(‘#sourceDiv’).scroll( function() { $(‘#targetDiv’).scrollTop($(this).scrollTop()); $(‘#targetDiv’).scrollLeft($(this).scrollLeft()); }); $(‘#targetDiv’)....
JS去除iframe滚动条的方法
10-24
主要介绍了JS去除iframe滚动条的方法,涉及javascript操作iframe中属性的技巧,非常具有实用价值,需要的朋友可以参考下
详解如何用div实现自制滚动条
09-24
为了使自制滚动条能够动态响应用户的操作，我们需要监听两个关键事件：鼠标滚轮滚动和鼠标拖拽滚动条。对于鼠标滚轮事件，我们使用`'mousewheel'`事件监听器，根据`e.deltaY`的值来改变视口的`scrollTop`，然后根据...
滚动条同步
02-11
最近一直被滚动条同步的问题困扰，例子中使用了两个ClistCtrl进行滚动条同步，思想非常不错，值得学习，代码比较巧妙，留作备份。
Vue 中使用消息总线让两个滚动条同步滚动
lee576的专栏
03-04 1360
最近自己从零撸起的甘特图组件需要子组件的滚动条同步滚动 这就涉及到子组件之间的互相通信，通过 消息总线可以达到我们的需求 ,首先建立一个标志位，拖动左边滚动条的时候，右边的滚动条事件不处理，反之拖动右边滚动条时，左边的滚动条事件不做处理，建立一个公共的变量用于两者的互斥 store.js import Vue from 'vue' export let store = Vue.observable({ scrollFlag: true }) export let mutations =..
两个table的水平滚动条 级联滚动(同步滚动)
wangzhazha0000的博客
09-22 1244
做动态报表时，报表表头和内容是分开绘制的，如需加水平的滚动条，那么必须保证两个table同步
实现两个table的滚动条同时
m0_37343874的博客
07-12 2040
我们要实现的是：一个table的滚动条滚动，另一个table的滚动条同时进行滚动 如下图所示： 这儿有三层组件： 子组件：dataTable.vue 孙组件：MyTable.vue
js控制滚动条联动
张林强的专栏
09-05 5862
//控制两个div的滚动条联动，便于页面对比 function funcsrcoll1() { document.getElementById("div2").scrollLeft = document.getElementById("div1").scrollLeft; document.getElementById("div2").scrollTop = document.getElement
解决Jquery使两个滚动条同步滚动后滚动时候速度很慢的问题
Kasugano_Love的博客
01-21 808
解决Jquery使两个Div的滚动条同步滚动后滚动时候速度很慢的问题 通过mouseover事件解决
两个listview中关联同步滚动条——pyqt5
阚建君学习之路
03-17 922
同步滚动条
JavaScript 实现滚动条同步滚动
04-22
两个元素的方法是什么？ 你可以使用jQuery或纯JavaScript来实现这个功能。首先，你需要监听第一个元素（例如，文本区域或表格）上的滚动事件，并使用scrollTop属性来获取当前滚动位置。然后，你可以将该值设置为另一个元素（例如，另一个文本区域或表格）的scrollTop属性，以保持它们的滚动位置同步。 以下是一个使用jQuery的示例代码： ``` $(document).ready(function(){ $('.first-element').scroll(function(){ var scrollTop = $(this).scrollTop(); $('.second-element').scrollTop(scrollTop); }); }); ``` 在这个例子中，我们监听第一个元素上的滚动事件（使用“first-element”类选择器），获取scrollTop属性，并将其设置为第二个元素（使用“second-element”类选择器）的scrollTop属性，以保持它们的滚动位置同步。 如果你想使用纯JavaScript来实现这个功能，你可以使用类似下面的代码： ``` var firstElement = document.querySelector('.first-element'); var secondElement = document.querySelector('.second-element'); firstElement.addEventListener('scroll', function() { var scrollTop = firstElement.scrollTop; secondElement.scrollTop = scrollTop; }); ``` 这个代码片段中，我们首先获取了第一个和第二个元素的引用，然后使用addEventListener方法来监听第一个元素的滚动事件。在事件处理程序中，我们使用scrollTop属性获取当前的滚动位置，并将其设置为第二个元素的scrollTop属性，以保持它们的滚动位置同步。 希望这些例子能帮到你！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值