How to make two div's scroll at the same time? I have two div's with text, but one div is bigger and I want to scroll both of them at the same time.
Any ideas?
.content {
width: 100%;
}
.left {
background-color: yellow;
width: 50%;
float: left;
max-height: 200px;
}
.right {
background-color: green;
width: 50%;
float: left;
max-height: 200px;
overflow: hidden;
overflow-y: scroll;
}
So u want to scroll both div's at the same time?
Change your CSS to this:
.content {
width: 100%;
max-height: 200px;
overflow-y: scroll;
}
.left{
background-color: yellow;
width: 50%;
float: left;
}
.right{
background-color: green;
width: 50%;
float: left;
}
Check out this fiddle: https://jsfiddle.net/fhq2kmvb/12/
Maybe something like that could get you started
script
$('.left').scroll(function () {
$('.right').scrollTop($(this).scrollTop());
});
css
.content {
width: 100%;
}
.left{
background-color: yellow;
width: 50%;
max-height: 200px;
float: left;
overflow: hidden;
overflow-y: scroll;
}
.right{
background-color: green;
width: 50%;
max-height: 200px;
float: left;
overflow: hidden;
overflow-y: scroll;
}
Wasted 5 hours on this.
I had a similar question.
I wanted to overlap & also scroll.
.content {
position: "relative";
overflow: "auto";
}
.below{
font-family: "Courier New", Courier, monospace;
background-color: yellow;
position: absolute;
top: 0px;
z-index: -1;
/* width: 100%; */
}
.above{
font-family: "Courier New", Courier, monospace;
position: absolute;
background-color: transparent;
top: 0px;
z-index: 1;
/* width: 120%; */
}
https://codepen.io/manoharreddyporeddy/pen/XWmpYQL
Hope that helps.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.