如何让页面上两个div中的滚动条(滑块)同步运动？

最新推荐文章于 2023-08-18 11:59:45 发布
原创 最新推荐文章于 2023-08-18 11:59:45 发布 · 2.8k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#jQuery #滚动条同步

本文介绍了一个使用JQuery实现两个div元素滚动条同步滚动的示例代码。当一个div滚动时，另一个div会跟随其滚动位置进行同步滚动。
使用JQuery添加如下代码
$('#sourceDiv').scroll( function() {
	$('#targetDiv').scrollTop($(this).scrollTop());
	$('#targetDiv').scrollLeft($(this).scrollLeft());
});
$('#targetDiv').scroll( function() {
	$('#sourceDiv').scrollTop($(this).scrollTop());
	$('#sourceDiv').scrollLeft($(this).scrollLeft());
});


效果图：

1

2


【demo】-两个div同步滚动
jieweiwujie的博客
11-04 362
两个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控制多个滚动条同步跟随滚动效果
11-29
在一些支持用 markdown 写文章的网站，后台写作页面，一般都是支持 markdown 即时预览的，也就是将整个页面分成两部分，左半部分是你输入的 markdown 文字，右半部分则即时输出对应的预览页面，例如下面就是 优快云 后台写作页面的 markdown 即时预览效果： 本文不是阐述如何从 0 实现这种效果的（后续 很可能 会单出文章，），抛开其他，单看页面主体中左右两个容器元素，即 markdown 输入框元素和预览显示框元素 本文要探讨的是，当这两个容器元素的内容都超出了容器高度，即都出现了滚动框的时候，如何在其中一个容器元素滚动时，让另外一个元素也随之滚动。 DOM 结构
js_控制两个滚动条同时滚动
qq_45104829的博客
08-18 975
类似csdn，md这种左右滚动条联动的效果。
两个div滚动条同步简单实现
HiNet
03-25 1万+
横向滚动条同步： 竖向滚动条同步：
精选资源
vue自定义浏览器滚动条(兼容大部分浏览器含ie)_vue tree组件 下拉滚动条
01-09
在前端开发中，有时我们需要对浏览器的默认滚动条进行自定义，以提升用户体验或符合页面设计风格。Vue.js，作为一款流行的JavaScript框架，提供了多种方式来实现这一需求。本篇文章将详细探讨如何在Vue项目中自定义...
基于jquery的横向滚动条（滑动条）
10-28
创建两个具有ID的`<div>`元素，分别用于顶部和底部的滚动条。一个用于显示内容的`<div>`也需要包含在内，其ID为"holder"。这样布局可以让滚动条与内容同步移动。 ```html <div id="topslider" runat="server"></div...
JavaScript限定范围拖拽及自定义滚动条应用（3）
10-19
在示例中，div1作为内容区域，而div2则作为滚动条的滑块。当滑块被拖动时，通过更新div1的样式属性来控制内容的滚动。 实现自定义滚动条的关键在于，在鼠标按下事件中，记录下鼠标的相对位置，并在鼠标移动事件中，...
div同步滚动js
xuelang532777032的博客
06-03 912
无标题文档 111111111111111111111111111111111111111111111111111111dsdsdsddadasd23232323232222222222222222222222222222222222222 1234564d65sds5dad起嗯无群二wq9e8eqw89e789we89qwe98wq74e9q8we89wq98
js如何实现两个滚动条同步滚动
weixin_44840212的博客
06-27 9447
如下图所示：实现两个区域竖向滚动条同步滚动 页面结构布局和样式如下：（为了一张截图展示，结构里p标签都有删减，可随意添加能出滚动条就可以） 下图是js代码：代码没几行，注意下边注释，涉及同步滚动比例计算 注释：1、scale为滚动条滚动比例（左边可滚动最大高度/右边可滚动最大高度） clientHeight和offsetHeight均可获取元素高度，这里用clientHeight是因为这个属...
实现两个div滑动时联动（滑动任意一个，其他一个跟着动）
https://shixuebin.gitee.io/hexo-blog/
07-21 1646
【代码】实现两个div滑动时联动（滑动任意一个，其他一个跟着动）
div同步滚动的方式
weixin_42470796的博客
02-16 1686
先来放图看效果 在一切开始前我们先来测试原生的js实现的方法 1.新建一个test.html文件 要求在html中创建两个div，同等固定高度的，并随意填充任意的text,p div等大量超出div的高度。 2.需求分析 我们的目的是尽量左边滚动右边同步滚动，而右边滚动左边却不滚动。代码如下。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <
两个iframe同时滚动实现界面内容对比功能
qq_30515213的博客
05-29 1268
PS：版本对比思路是（不做对比跳过），版本1、版本2两个数据存放 采用 key - value 格式 这样遍历的时候 就可以 通过 for(key in versionAyy) 来遍历，通过 key去获取另外一个数组的 内容，然后两个进行比较(当遇到多选框、复选框 只展示差异选项时，通过字符截取 获取选择项 然后逐一对比，获取差异项存放到另一个差异项数组中)，如果差异就 存放到一个差异集合，子界面再调用即可，这里就不放上来了，如有需要或者探讨可以联系我。优点，可以实现N个界面同时滚动和对比。
js实现两个元素滚动条同步的方法
Demonre的博客
02-17 3171
目标 同步显示两个标签元素的内容，需要同步滚动条。 原理 监听元素对象的滚动条事件 var box = document.getElementById('box') // 获取id为box的元素 box.onscroll = function() { // box的滚动条滚动时触发 } 滚动条的属性 // 垂直滚动条 box.scrollHeight // 可滚动的高度 box....
JavaScript实现两个滚动条同步滚动
qq_41180882的博客
07-25 1323
【代码】JavaScript实现两个滚动条同步滚动。
两个table的水平滚动条 级联滚动(同步滚动)
wangzhazha0000的博客
09-22 1621
做动态报表时，报表表头和内容是分开绘制的，如需加水平的滚动条，那么必须保证两个table同步
原生JS控制多个滚动条同步跟随滚动
热门推荐
Quiet-Night的博客
12-21 1万+
原生JS控制多个滚动条同步跟随滚动
两个div同步滚动
weixin_42979149的博客
06-28 4770
html: <div id="div1"> // code... </div> <div id="div2"> // code... </div> 首先一开始我想的是两个div的scroll同时去修改另一个div的scrollTop，但这样会导致卡顿，滚动非常慢，这是由于相互调用导致的 如下： $("#div1").scroll(fun...
使用JavaScript原生实现自定义滚动条效果
4. ::-webkit-scrollbar-thumb：设置滚动条滑块的样式。 5. ::-webkit-scrollbar-track：设置滚动条轨道的样式。 知识点四：兼容性和性能优化 在实现自定义滚动条效果时，需要考虑到浏览器的兼容性问题。不同...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

潘少博

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值