js控制滚动条联动

已于 2022-02-27 09:32:41 修改
阅读量5.8k 收藏 2
点赞数 2
分类专栏： 积累分享 文章标签： js div滚动条联动对比
于 2015-09-05 18:21:27 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011411069/article/details/48227413
版权 
<body>
<div id="div1"  style="width:620px;height:500px ; float:left;overflow:scroll" onscroll="funcsrcoll1()">
    <div style="height:1000px;width:1000px"></div>
</div>
<div id="div2" style="width:620px; height:500px ;float:left;overflow:scroll" onscroll="funcsrcoll2()">
   <div style="height:1000px;width:1000px"></div>
</div>
<script>
//控制两个div的滚动条联动，便于页面对比
function funcsrcoll1()
{
document.getElementById("div2").scrollLeft = document.getElementById("div1").scrollLeft;
document.getElementById("div2").scrollTop = document.getElementById("div1").scrollTop;
}
function funcsrcoll2()
{
document.getElementById("div1").scrollLeft = document.getElementById("div2").scrollLeft;
document.getElementById("div1").scrollTop = document.getElementById("div2").scrollTop;
}
</script>
</body>

淘金者05012
关注
专栏目录
JS控制滚动条联动
01-20
多个DIV,JS控制DIV之间的滚动条联动
js控制多个滚动条联动显示，以及解决滑动鼠标滚轮导致的问题
haogemr的博客
08-31 901
【代码】js控制滚动条联动显示，以及解决滑动鼠标滚轮导致的问题。
element-plus 两个或多个table同步滚动条联动
最新发布
qq_21579949的博客
08-20 311
element-plus两个或多个表格左右滚动条滑动同步实现逻辑如下。 注：上下滚动同步联动一样的逻辑 table节点添加scrollTop赋值即可。
JavaScript实现两个滚动条同步滚动
qq_41180882的博客
07-25 1060
【代码】JavaScript实现两个滚动条同步滚动。
【滚动条联动】
DramaticCodeBoy's blog
12-27 556
1. 功能效果 – 左侧点击右侧可跳转(这个比较简单, 用一个better-scroll这个插件的API即可） 右侧滚动, 左侧实时绑定class 2. 找思路 – 1. 一开始我的思路是这样的 右侧滚动时, 找到菜品标题这个dom元素的一个API(相对于页面或父元素的距离) 遍历每一个标题, 判断是否处在一个距离内, 然后传值给左侧 测试了一圈, 发现并没有这种API, 溜了溜了 2...
原生JS控制多个滚动条同步跟随滚动效果
11-29
在一些支持用 markdown 写文章的网站，后台写作页面，一般都是支持 markdown 即时预览的，也就是将整个页面分成两部分，左半部分是你输入的 markdown 文字，右半部分则即时输出对应的预览页面，例如下面就是 CSDN 后台写作页面的 markdown 即时预览效果： 本文不是阐述如何从 0 实现这种效果的（后续 很可能 会单出文章，），抛开其他，单看页面主体中左右两个容器元素，即 markdown 输入框元素和预览显示框元素 本文要探讨的是，当这两个容器元素的内容都超出了容器高度，即都出现了滚动框的时候，如何在其中一个容器元素滚动时，让另外一个元素也随之滚动。 DOM 结构
博客侧边栏模块跟随滚动条滑动固定效果的实现方法(js+jquery等)
12-10
【博客侧边栏模块跟随滚动条滑动固定效果的实现方法】 在网页设计中，侧边栏通常用于显示各类辅助信息，如文章分类、广告、最新评论等。然而，当页面内容过长时，传统的侧边栏设计可能导致部分模块无法在用户视野内...
图片拖动排序支持滚动条联动
03-21
标题“图片拖动排序支持滚动条联动”涉及的是一个网页或应用中的交互设计技术，它允许用户通过拖放操作来改变图片的顺序，同时滚动条会根据图片位置的变化进行联动，提供流畅的用户体验。这种功能常见于图片管理、...
js怎样处理双滚动条，左边滚动条滑动，右边的滚动条也会跟着动，用户体验会非常不好
xiaodanda的博客
07-25 1407
js怎样处理双滚动条，左边滚动条滑动，右边的滚动条也会跟着动，用户体验会非常不好
js左右联动实现滚动方法
weixin_68658847的博客
11-03 1227
js左右联动实现滚动方法
Javascript:通用不间断滚动&省、市、地区联动选择JS封装类
06-01
NULL 博文链接：https://liuzidong.iteye.com/blog/1001483
让页面上两个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 701
类似csdn，md这种左右滚动条联动的效果。
div滚动条联动
格林王子举哥
07-27 1303
应用场景：一般是表头和表体，或者是需要联动的div，滚动一个div的滚动条，让另一个div的滚动条也随之滚动到一样的位置 //表头 <div id="sc-table-head-div" class="sc-table-head-div" style="position:absolute;"> <table id="conitor_head" style="...
滚动滚动条时，做一些联动操作
lianflower的博客
02-16 315
转载：https://www.youtube.com/watch?v=lZ-OO7x75Rc <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding:
vue实现滚动条联动（一个滚动条控制两个或多个）
编程不过是一门失传艺术的别名，这门艺术的名字叫做“思考”
04-28 1365
这样就实现了两边表格的滚动条联动，有多个表格，也是同样的方法，使多个表格的scrollTop和scrollLeft相同就可以了。
jq移动端点击导航滚动对应位置并跟随联动效果
小周sri的码农
03-14 1588
使用jq实现一个移动端锚点效果 页面布局 导航栏布局 <div class="tabs"> <ul class="list-item"> <li class="active">首页</li> <li>详情</li> ...
两个div滚动条同步简单实现
热门推荐
HiNet
03-25 1万+
横向滚动条同步： 竖向滚动条同步：
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值