html 多层滚动,如何实现多个div同时滚动（3个以上）
问题描述
有5个宽度相同的div纵向排列，都会有内容横向溢出。想要实现不论在某一div进行拖动，都能使得其他div能同步滚动。
尝试以及问题
有尝试过如下方法将div1的scrollLeft值与div0的scrollLeft绑定起来，依次绑定，div2和div1,div3和div2...最后将div4和div0的scrollLeft彼此绑定，初看是木有问题能够实现同步横向滚动，但是滚动速度过快就会出现卡顿，内容抖动的情况，自己总结了一下原因是因为每个div会循环刷新彼此的scrollLeft值
相关代码
无标题文档
2
2
2
2
2
2
2
2
2
2
2
2
2
2
2
2
2
2
2
2
2
2
2
2
2
2
2
2
2
2
2
2
2
2
2
2
3
3
3
3
3
3
3
3
3
预期
五个div能够很顺滑的同步横向滚动
在度娘上找到一个说是根据鼠标的坐标获取鼠标哪一个div范围内，然后将该div的onscroll事件作为主事件去响应，然而这又有了一个新的问题就是，我这五个div是在一个大的div#parent里，该div#parent的样式属性overflow：auto，所以这样就加大了上述方法的难度。。。
诸位大侠有什么好的方法么orz
追答
感谢一楼的提醒，也是自己魔怔了，现整理示例代码如下：
纵向left-parent 跟随 right-parent滚动，横向right-parent自行横向滚动，此类效果可以用作类似于表格冻结表格首列的效果
无标题文档
.container {
display: flex;
justify-content: flex-start;
height: 600px;
overflow-y: scroll
}
.right-parent {
width: 400px;
overflow-x: scroll;
/* z-index: 999; */
}
.left-parent {
width: 200px;
overflow: hidden;
border-right: 2px solid #eeeeee
}
.son {
width: 800px;
height:200px;
}
.sub {
width: 200px;
height:200px;
}
html 多层滚动,如何实现多个div同时滚动（3个以上）相关推荐
- html滚动字幕高度,jquery取div scrollHeight(滚动文字的实际高度)scrollHeight获取
jquery取div scrollHeight(滚动文字的实际高度)scrollHeight获取文字层实际高度 scrollHeight获取文字层实际高度 $(document).ready(func ...
- html div 自动滚动到底部,javascript让DIV的滚动自动滚动到最底部-4种方法
要制作一个在线聊天的程序,在做最后的修饰时,需要对获得的信息即时滚动以保证用户总能看到最新消息. 聊天程序是基于AJAX设计的,没有用框架,消息容器是一个DIV,所以问题就在于如何控制DIV的滚动条. ...
- html5div上下滚动,html5 – 在另一个div上滚动div
你不需要jquery插件来做这个"滚动效果".你只需要一些CSS;) 这里快速而肮脏的例子: HTML FIXED PANEL Scrolling-Panel 1 Scrollin ...
- div:给div加滚动栏 div的滚动栏设置
今天做了个样例: div 的滚动栏问题: 两种方法: 一. <div style=" overflow:scroll; width:400px; height:400px;" ...
- java怎么设有滚动的标签,html标签overflow属性和javascript实现div标签滚动
原标题:html标签overflow属性和javascript实现div标签滚动 昨天一个朋友说他实现了一个div循环滚动显示的demo,但是弄到jsp中就不滚动了,而且debug测试div的scro ...
- 控制DIV内容滚动的方法，实现不用拖滚动条就可以看到最新消息
三种控制DIV内容滚动的方法: 本人qq群也有许多的技术文档,希望可以为你提供一些帮助(非技术的勿加). QQ群: 281442983 (点击链接加入群:http://jq.qq.com/?_wv ...
- 为div添加滚动效果:
为div添加滚动效果: .xxxx{ width: 100%;height: 100%;overflow: hidden;overflow-y: auto;} 代码片段 <div class=& ...
- js禁止鼠标滑轮_js实现鼠标滑动到某个div禁止滚动
本文实例为大家分享了js实现鼠标滑动到某个div禁止滚动的具体代码,供大家参考,具体内容如下 项目中碰到一个场景就是当鼠标滑倒某个div的时候,滑动鼠标页面不再滚动. 这里主要是当鼠标滑动到该div时 ...
- div 图片滚动 / 文字滚动
今天研究了一下图片滚动,网上有很多可以使用的例子,所以先是找了一个用的是表格布局的,如下: <!DOCTYPE html> <html xmlns="http://www. ...
最新文章
- mysql5.6.24配置日志_windows下mysql5.6.x的日志正确配置方法(my.ini) （网上的都是5.6之前的版本）...
- 【收藏】windows下 Mysql 错误 Can‘t open and lock privilege tables: Table ‘mysql.user‘ doesn‘t exist
- SpringBoot+Shiro+ehcache实现登录失败超次数锁定帐号
- leetcode24题：两两交换链表的节点
- 比_thread高级的threading模块，对比释放锁例子
- win10+jdk8重启后失效
- Maven - settings.xml里的offline节点的作用
- 使用Calendar增加日期
- 自写的简单屏蔽特定字符的TextBox和数字TextBox
- radl (三) (转)
- mro python_Python进阶-继承中的MRO与super
- 泡泡龙游戏开发系列教程(三)
- 达梦数据库创建公共同义词和私有同义词
- 一个封锁操作被对wsacancelblockingcall_突破封锁再进一步，华为鸿蒙OS成功登上手机...
- NYOJ326_Dining(最大流)
- 居中小圆点html,圆点怎么打
- flex trace无法使用
- Java后端程序员未来职业规划路线，超用心整理，建议收藏
- 凯撒密码---最简单的加密方式之一
- 海天蚝油《挑战不可能》7岁孩子盲棋PK，目标直指冠军王天一