Hello I use skrollr js to create parallax website but because we don't know the height of section because section height depend on the content so what I need is find the last attribute and change number value only with section height.
for example:
for section 1 the data-800 (attr) will be data-800="position:fixed;top:-$('section 1').height;"
for section 2 the data-900 (attr) will be data-900="position:fixed;top:-$('section 2').height;"
my goal is get height for any section and set it in the attribute
$('section').attr('data-800', 'position:fixed;top:-' + $('.section').height());
var s = skrollr.init({
render: function(data) {
console.log(data.curTop);
}
});
html,
body {
margin: 0;
height:100%;
}
.grad0 {
height:100%;
position:fixed;
top:0px;
background-color: #FFAAAA;
background-image: url(https://production-assets.codepen.io/assets/profile/profile-bg-8ff33bd9518be912289d4620cb48f21eb5c9a2e0b9577484126cfe10a5fb354f.svg);
}
.grad1 {
position:fixed;
background-color: #00FF00
}
.grad2 {
position:fixed;
top:800px;
background-color: #0000FF
}
.grad3 {
position:fixed;
top:1200px;
height:400px;
background-color: #00FFFF
}
section {
width:100%;
}
img {
position: absolute;
top:150px;
}
<section class="grad0 w60" data-0="top:0px;" data-400="top:0px;" data-800="position:fixed;top:-400px;">
<img src="http://www.cs.cmu.edu/~chuck/lennapg/len_top.jpg" data-0="left:0px" data-400="left:1600px;">
</section>
<section class="grad1" data-400="position:fixed;top:638px;" data-900="position:fixed;top:-400px;">
<h1>Hello World</h1>
</section>
<section class="grad2" data-0="position:fixed;top:800px;" data-400="position:fixed;top:800px;" data-800="position:fixed;top:000px;">
content
</section>
<section class="grad3" data-0="position:fixed;top:1200px;" data-400="position:fixed;top:1200px;" data-800="position:fixed;top:400px;">
content
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/skrollr/0.6.30/skrollr.min.js'></script>
Updated:
As you commented for each of the last data attribute should be targeted:
$('section').each(function() {
var $this = $(this)
var dataset = Object.keys(this.dataset);
$.each(dataset, function(i, item) {
if (i === dataset.length - 1) {
$this.attr('data-' + dataset[i], 'position:fixed;top:-' + $this.height());
console.log($this[0].dataset);
}
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="grad0 w60" data-0="top:0px;" data-400="top:0px;" data-800="position:fixed;top:-400px;">
<img src="http://www.cs.cmu.edu/~chuck/lennapg/len_top.jpg" data-0="left:0px" data-400="left:1600px;">
</section>
<section class="grad1" data-400="position:fixed;top:638px;" data-900="position:fixed;top:-400px;">
<h1>Hello World</h1>
</section>
<section class="grad2" data-0="position:fixed;top:800px;" data-400="position:fixed;top:800px;" data-800="position:fixed;top:000px;">
content
</section>
<section class="grad3" data-0="position:fixed;top:1200px;" data-400="position:fixed;top:1200px;" data-800="position:fixed;top:400px;">
content
</section>
Related
This question already has answers here:
How to hide/show a fixed element when scrolling some sections into view vertically?
(2 answers)
Closed 5 months ago.
I want that fixed element #logoimode3 show/hide on some sections.
Example: Show #logoimode3 on #section2 and #section3 Hide #logoimode3 on #section1 and #section4
And need to hide also in small screen.
So fixed element have to disapear on blue section. And than show again on green section. I want my logo to disapear while scrolling trought section 2.
<!DOCTYPE html>
<html>
<head>
<style></style>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
jQuery(document).ready(function() {
var sec2 = document.getElementById("section2");
var pos = sec2.getBoundingClientRect();
var height1 = pos.height * -1;
if (pos.top < 1 && pos.top > height1) {
jQuery('#logoimode3').hide();
}
else if(pos.top < height1 || pos.top > 1) {
jQuery('#logoimode3').show();
}
});
jQuery(window).scroll(function() {
var sec2 = document.getElementById("section2");
var pos = sec2.getBoundingClientRect();
var height1 = pos.height * -1;
if (pos.top < 1 && pos.top > height1) {
jQuery('#logoimode3').hide();
}
else if(pos.top < height1 || pos.top > 1) {
jQuery('#logoimode3').show();
}
});
</script>
</head>
<body>
<img id="logoimode3" class="logo3" style="position:fixed;top:0px;left:0px;" src="https://imode.info/imode/slike/ikone/IMODE_znak-01.svg" alt="logo" height="" width="30px">
<section id="section1" style="background: red; height:100vh;"></section>
<section id="section2" style="background: blue; height:100vh;"></section>
<section id="section3" style="background: green; height:100vh;"></section>
<section id="section4" style="background: pink; height:100vh;"></section>
</body>
<footer></footer>
</html>
here i have added code for
$(document).ready(function(){
$("#hide").click(function(){
$("div").hide(1000);
});
$("#show").click(function(){
$("div").show(1000);
});
});
div{
width:100px;
height:100px;
border-radius:50%;
background-color:#9081c6;
display:flex;
align-self:center;
align-items: center;
justify-content: center;
font-size:14px;
margin-bottom:15px;
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<div>jquery</div>
<button id="hide">Hide</button>
<button id="show">Show</button>
</body>
</html>
showing and hiding div on click with animation effect
Please try below code :
<html>
<head>
<style></style>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
jQuery(document).ready(function() {
jQuery('#logoimode3').hide();
});
$(document).scroll(function () {
$('section').each(function () {
if($(this).position().top <= $(document).scrollTop() && ($(this).position().top + $(this).outerHeight()) > $(document).scrollTop()) {
if($(this).attr('id') == "section1" || $(this).attr('id') == "section4")
{
jQuery('#logoimode3').hide();
}
else
{
jQuery('#logoimode3').show();
}
}
});
});
</script>
</head>
<body>
<img id="logoimode3" class="logo3" style="position:fixed;top:0px;left:0px;" src="https://imode.info/imode/slike/ikone/IMODE_znak-01.svg" alt="logo" height="" width="30px">
<section id="section1" style="background: red; height:100vh;"></section>
<section id="section2" style="background: blue; height:100vh;"></section>
<section id="section3" style="background: green; height:100vh;"></section>
<section id="section4" style="background: pink; height:100vh;"></section>
</body>
<footer></footer>
</html>
For Demo : https://jsfiddle.net/fxjL7gmw/1/
I have three images in <section>
<section class="one">
<img src="one.png" />
</section>
<section class="two">
<img src="two.png" />
</section>
<section class="three">
<img src="three.png" />
</section>
I have added some css to position the sections:
$('.one').css({
position:'absolute',
top:100
});
$('.two').css({
position:'absolute',
top:800
});
$('.three').css({
position:'absolute',
top:1600
});
My problem is in the js - I want to position each element dynamically so for example the first section would be top 100px the section one would be 200px and the third one would be 300px. This is what i have managed so far:
$.fn.inView = function(){
var win = $(window);
obj = $(this);
var scrollPosition = win.scrollTop();
var visibleArea = win.scrollTop() + win.height();
var objEndPos = (obj.offset().top + obj.outerHeight());
var visible =(visibleArea >= objEndPos && scrollPosition <= objEndPos);
$.each( obj, function( index ) {
if(visible){
//console.log(index);
$(obj).css({
position:'fixed',
top: index*100//Problem here
});
}
});
};
The main problem you had there was that you set the css of the obj jquery selector, and not on the img that was in the obj selector.
In order to get to the img element you could use any of $(this) or add a second parameter to the callback function inside the $.each, which is the current element:
$.each(obj, function(index, el) {
$(el).css
Here is a complete snippet:
$(function() {
obj = $('section img');
$.each(obj, function(index) {
$(this).css({
position:'fixed',
top: index*100
});
});
});
section img {
width: 50px;
height: 50px;
border: 1px solid black;
}
section.one img {
border-color: red;
}
section.two img {
border-color: green;
}
section.three img {
border-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="one">
<img src="one.png" alt="one"/>
</section>
<section class="two">
<img src="two.png" alt="two" />
</section>
<section class="three">
<img src="three.png" alt="three" />
</section>
I would like to change an image on a certain scroll position. For example:
Scroll 100px show img1.jpg
Scroll 200px show img2.jpg
Scroll 300px show img3.jpg
Here I found an example what I mean.
Any ideas?
You can use the onScroll event to listen for scrolling, check at what position the scrollbar is and make the image change or whatever your heart desires. You can read more about onScroll event here. A basic code will be something like this:
var onScrollHandler = function() {
var newImageUrl = yourImageElement.src;
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
if (scrollTop > 100) {
newImageUrl = "img1.jpg"
}
if (scrollTop > 200) {
newImageUrl = "img2.jpg"
}
if (scrollTop > 300) {
newImageUrl = "img3.jpg"
}
yourImageElement.src = newImageUrl;
};
object.addEventListener ("scroll", onScrollHandler);
Of course yourImageElement should be replaced with the image element you want to change.
If you have jQuery availble you can use the .scroll() method instead of the event listener and the .scrollTop() to get the scrollbar position.
Also, you might want to look at some scroll/paralex libraries like skrollr.
$(window).on("scroll touchmove", function()
{
if ($(document).scrollTop() >= $("#one").position().top && $(document).scrollTop() < $("#two").position().top )
{
$('body').css('background-image', 'url(https://4.bp.blogspot.com/-Ivk46EkgQfk/WWjbo4TdJbI/AAAAAAAAFUo/gUD7JABklsIA1gWIr5LS1slyY4QuTMkEwCLcBGAs/s1600/gambar%2Bwallpaper%2Bmobil.jpg)')
};
if ($(document).scrollTop() >= $("#two").position().top && $(document).scrollTop() < $("#three").position().top)
{
$('body').css('background-image', 'url(https://i1.wp.com/cdn.catawiki.net/assets/marketing/uploads-files/45485-8bdcc8479f93d5a247ab844321b8b9d5e53c49a9-story_inline_image.jpg)')
};
if ($(document).scrollTop() >= $("#three").position().top && $(document).scrollTop() < $("#four").position().top )
{
$('body').css('background-image', 'url(https://s-media-cache-ak0.pinimg.com/originals/e1/7a/03/e17a0385726db90de1854177d4af2b4f.jpg)')
};
if ($(document).scrollTop() >= $("#four").position().top)
{
$('body').css('background-image', 'url(https://www.wallpaperup.com/uploads/wallpapers/2015/02/13/621414/6fc33c3ae65a58f9bb137f5cf011aebc.jpg)')
};
});
*{
margin:0;
padding:0;
}
.main{
width:100%;
height:100vh;
background-image:url('https://4.bp.blogspot.com/-Ivk46EkgQfk/WWjbo4TdJbI/AAAAAAAAFUo/gUD7JABklsIA1gWIr5LS1slyY4QuTMkEwCLcBGAs/s1600/gambar%2Bwallpaper%2Bmobil.jpg');
background-size:100% 100%;
background-attachment:fixed;
transition: 1000ms;
}
section{
width: 100%;
min-height: 1px;
}
.content{
width:50%;
min-height:1px;margin-top:10%;
margin-left:10%;
color:white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body class='main'>
<section id="one">
<div class='content'>
<h1 style='font-size:5vw;'>first heading</h1>
<p style='font-size:3vw;' >description</p>
</div>
</section>
<section id="two" style='margin-top:100vh'>
<div class='content'>
<h1 style='font-size:5vw;'>second heading</h1>
<p style='font-size:3vw;'>description</p>
</div>
</section>
<section id="three" style='margin-top:100vh' >
<div class='content'>
<h1 style='font-size:5vw;'>third heading</h1>
<p style='font-size:3vw;'>description</p>
</div>
</section>
<section id="four" style='margin-top:100vh' >
<div class='content' style='margin-bottom:10%;'>
<h1 style='font-size:5vw;'>fourth heading</h1>
<p style='font-size:3vw;'>description</p>
</div>
</section>
</body>
</html>
documentation
create a web folder first.
create a img sub folder // place all images into this folder
now create three files // in web folder
index.html
css.css
js.js
copy code given bellow and paste it.
save the program.
finally run the program
click on this link to see the video :https://www.youtube.com/watch?v=V97wCVY_SrQ
visit our website for full documentation :https://nozzons.blogspot.com/
index.html
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href='css.css' rel='stylesheet' type='text/css'/>
<script src='js.js'></script>
</head>
<body class='main'>
<section id="one">
<div class='content'>
<h1 style='font-size:5vw;'>first heading</h1>
<p style='font-size:3vw;' >description</p>
</div>
</section>
<section id="two" style='margin-top:100vh'>
<div class='content'>
<h1 style='font-size:5vw;'>second heading</h1>
<p style='font-size:3vw;'>description</p>
</div>
</section>
<section id="three" style='margin-top:100vh' >
<div class='content'>
<h1 style='font-size:5vw;'>third heading</h1>
<p style='font-size:3vw;'>description</p>
</div>
</section>
<section id="four" style='margin-top:100vh' >
<div class='content' style='margin-bottom:10%;'>
<h1 style='font-size:5vw;'>fourth heading</h1>
<p style='font-size:3vw;'>description</p>
</div>
</section>
</body>
</html>
css.css
*{
margin:0;
padding:0;
}
.main{
width:100%;
height:100vh;
background-image:url('img/img_one.jpg');
background-size:100% 100%;
background-attachment:fixed;
transition: 1000ms;
}
section{
width: 100%;
min-height: 1px;
}
.content{
width:50%;
min-height:1px;margin-top:10%;
margin-left:10%;
color:white;
}
js.js
$(window).on("scroll touchmove", function()
{
if ($(document).scrollTop() >= $("#one").position().top && $(document).scrollTop() < $("#two").position().top )
{
$('body').css('background-image', 'url(img/img_one.jpg)')
};
if ($(document).scrollTop() >= $("#two").position().top && $(document).scrollTop() < $("#three").position().top)
{
$('body').css('background-image', 'url(img/img_two.jpg)')
};
if ($(document).scrollTop() >= $("#three").position().top && $(document).scrollTop() < $("#four").position().top )
{
$('body').css('background-image', 'url(img/img_three.jpg)')
};
if ($(document).scrollTop() >= $("#four").position().top)
{
$('body').css('background-image', 'url(img/img_four.jpg)')
};
});
So i am just answering this old thread because I was trying to implement the same thing on my website but i found it a bit difficult to implement it so I made a function of my own , its a bit easier to implement and understand but a bit buggy, For instance: if the user use the scroll bar instead of scroll wheel of the mouse the image will not change , hope it helps you :
<html>
<head>
<script>
function f() {
t1.src = "https://igu3ss.files.wordpress.com/2012/09/chess_king_4.jpg"
t1.height = "319"
t1.width = "330"
}
function f2() {
t1.src = "https://upload.wikimedia.org/wikipedia/commons/thumb/d/d3/Chess_piece_-_Black_queen.JPG/130px-Chess_piece_-_Black_queen.JPG"
t1.height = "319"
t1.width = "330"
}
function f3() {
t1.src = "https://asmoodle.asmadrid.org/blog/s16240/wp-content/uploads/sites/56/2014/12/protourney_knight_black_400.jpg"
t1.height = "244"
t1.width = "330"
}
function f4() {
t1.src = "https://thumbs.dreamstime.com/x/chess-knight-white-background-29811348.jpg"
t1.height = "244"
t1.width = "350"
}
function f5() {
t1.src = "http://cdn.craftsy.com/upload/3703789/pattern/115774/full_7439_115774_ChessKnightMachineEmbroideryDesign_1.jpg"
t1.height = "319"
t1.width = "350"
}
</script>
</head>
<body>
<div align="center" style="position: fixed; z-index: 20; left:38.5%; top:200">
<img src="no.png" height="319" width="330" name="t1">
</div>
</div>
<div class="container" onmouseover="f3()" style="padding:0; margin:0; width:100%;">
<img src="https://pixabay.com/static/uploads/photo/2016/01/11/22/05/background-1134468_960_720.jpg" width="100%">
</div>
<br>
<br>
<div class="container" onmouseover="f4()" style="padding:0; margin:0; width:100%;">
<img src="https://image.freepik.com/free-photo/lens-flare-abstract-backgound_21276999.jpg" width="100%">
</div>
<br>
<br>
<div class="container" onmouseover="f5()" style="padding:0; margin:0; width:100%;">
<img src="https://image.freepik.com/free-photo/lens-flare-abstract-backgound_21276999.jpg" width="100%">
</div>
<br>
<br>
<div class="container" onmouseover="f()" style="padding:0; margin:0; width:100%;"></div>
</body></html>
Cheers!!
Ha[ppy] Coding.
I have to get the boxes to do the following:
Along the left hand side of the page have a number of boxes with different font names in them. When you click on those boxes have the font of the text in the middle box change. Do similar sets of boxes with changes associated for the right hand side and bottom of the page.
This is the coding I have so far:
<html>
<head>
<title>Boxes on Boxes on Boxes</title>
<style type="text/css">
#box_group1, #box_group2, #box_group3, #box_group4, #textbook {
position:absolute;
left:100px;
top:100px;
}
#box1, #box2, #box3, #box10, #box11, #box12 {
padding:5px;
width:50px;
height:50px;
float:left;
}
#box4, #box5, #box6, #box7, #box8, #box9 {
padding:5px;
width:50px;
height:50px;
}
#box1, #box4, #box7, #box10{
background-color:orange;
}
#box2, #box5, #box8, #box11 {
background-color:blue;
}
#box3, #box6, #box9, #box12{
background-color:green;
}
#textbook {
padding: 5px;
background-color:red;
}
</style>
<script language="JavaScript">
width=window.innerWidth;
height=window.innerHeight;
function boxes() {
document.getElementById("box_group1").style.left=(width-document.getElementById("box_group1").offsetWidth)/2;
document.getElementById("box_group2").style.top=(height-document.getElementById("box_group2").offsetHeight)/2;
document.getElementById("box_group3").style.left=width-100;100-document.getElementById("box_group3").offsetWidth;
document.getElementById("box_group3").style.top=(height-document.getElementById("box_group3").offsetHeight)/2;
document.getElementById("box_group4").style.left=(width-document.getElementById("box_group4").offsetWidth)/2;
document.getElementById("box_group4").style.top=height-100;100-document.getElementById("box_group4").offsetHeight;
document.getElementById("textbook").style.left=(width-document.getElementById("textbook").offsetWidth)/2;
document.getElementById("textbook").style.top=(height-document.getElementById("textbook").offsetHeight)/2;
}
</script>
</head>
<body onload="boxes()">
<div id="box_group1">
<div id="box1">
First box
</div>
<div id="box2">
Second box
</div>
<div id="box3">
Third box
</div>
</div>
<div id="box_group2">
<div id="box4">
Fourth box
</div>
<div id="box5">
Fifth box
</div>
<div id="box6">
Sixth box
</div>
</div>
<div id="box_group3">
<div id="box7">
Seventh box
</div>
<div id="box8">
Eighth box
</div>
<div id="box9">
Ninth box
</div>
</div>
<div id="box_group4">
<div id="box10">
Tenth box
</div>
<div id="box11">
Eleven box
</div>
<div id="box12">
Twelve box
</div>
</div>
<div id="textbook">Textbook</div>
</body>
</html>
I've done the task with jQuery which is more easier to maintain.Used functions to get desired data and manipulated them to create boxes dynamically.
HTML :
<div id="topDiv"></div>
<div id="leftDiv"></div>
<div id="rightDiv"></div>
<div id="bottomDiv"></div>
CSS :
#topDiv div{
float : left;
padding:5px;
width:50px;
height:50px;
}
#leftDiv div{
float : left;
padding:5px;
width:50px;
height:50px;
}
#rightDiv div{
float : right;
padding:5px;
width:50px;
height:50px;
}
#bottomDiv div{
float : left;
padding:5px;
width:50px;
height:50px;
}
#topDiv{
padding-left : 33%;
}
#leftDiv{
padding-top : 30%;
}
#bottomDiv{
padding-top : 68%;
padding-left : 33%;
}
#rightDiv{
margin-top : -30%;
}
.changedFont{
font-size : 20px;
}
jQuery :
$(document).ready(function(){
//First declare an array of colors that will also indicate the number of boxes.
var colorArray = new Array("red", "green", "blue");
//Execute a loop to create the boxes styling them properly
for(var i = 1; i <= colorArray.length ; i++){
$("#topDiv").append("<div id=Box" + i + "></div>");
$("#Box"+ i).css("background-color", colorArray[i-1]);
$("#Box"+i).text("Box" + i);
$("#leftDiv").append("<div id=Box" + i+1 + "></div>");
$("#Box"+ i+1).css("background-color", colorArray[i-1]);
$("#Box"+ i+1).text("Box" + i+1);
$("#rightDiv").append("<div id=Box" + i+2 + "></div>");
$("#Box"+ i+2).css("background-color", colorArray[i-1]);
$("#Box"+ i+2).text("Box" + i+2);
$("#bottomDiv").append("<div id=Box" + i+3 + "></div>");
$("#Box"+ i+3).css("background-color", colorArray[i-1]);
$("#Box"+i+3).text("Box" + i+3);
}
//Define the handler for onclick events
$("#topDiv").children().click(function(){
$("#topDiv").children().eq(1).css("background-color", $(this).css("background-color"));
$("#topDiv").children().eq(1).addClass("changedFont");
});
$("#leftDiv").children().click(function(){
$("#leftDiv").children().eq(1).css("background-color", $(this).css("background-color"));
$("#leftDiv").children().eq(1).addClass("changedFont");
});
$("#rightDiv").children().click(function(){
$("#rightDiv").children().eq(1).css("background-color", $(this).css("background-color"));
$("#rightDiv").children().eq(1).addClass("changedFont");
});
$("#bottomDiv").children().click(function(){
$("#bottomDiv").children().eq(1).css("background-color", $(this).css("background-color"));
$("#bottomDiv").children().eq(1).addClass("changedFont");
});
});
jsFiddle Demo
Jsfiddle
I trying to activate my current scroll while I am outside that scroll, specifically in #DivDet
here is what I tried:
$("div#DivDet").scroll(function () {
// I don't know what i should have here
// something like $("div#scrlDiv").scroll();
});
It sounds like you want to respond to a scroll on one div by scrolling another.
You've already determined how to hook the scroll event. To set the scroll position of an element (the other div), you set the element's scrollTop and scrollLeft values (which are in pixels). If you want two divs to scroll in near-unison, for instance, you'd assign the source div's scrollTop and scrollLeft to the target div.
Example: Live Copy | Source
Relevant JavaScript:
(function() {
var target = $("#target");
$("#source").scroll(function() {
target.prop("scrollTop", this.scrollTop)
.prop("scrollLeft", this.scrollLeft);
});
})();
or alternately (source):
(function() {
var target = $("#target")[0]; // <== Getting raw element
$("#source").scroll(function() {
target.scrollTop = this.scrollTop;
target.scrollLeft = this.scrollLeft;
});
})();
Full page:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<meta charset=utf-8 />
<title>Scroll Example</title>
<style>
.scroll-example {
display: inline-block;
width: 40%;
border: 1px solid black;
margin-right: 20px;
height: 100px;
overflow: scroll;
}
</style>
</head>
<body>
<p>Scroll the left div, watch the right one.</p>
<div id="source" class="scroll-example">
1
<br>2
<br>3
<br>4
<br>5
<br>6
<br>7
<br>8
<br>9
<br>10
<br>11
<br>12
<br>13
<br>14
<br>15
<br>16
<br>17
<br>18
<br>19
<br>20
</div>
<div id="target" class="scroll-example">
1
<br>2
<br>3
<br>4
<br>5
<br>6
<br>7
<br>8
<br>9
<br>10
<br>11
<br>12
<br>13
<br>14
<br>15
<br>16
<br>17
<br>18
<br>19
<br>20
</div>
<script>
(function() {
var target = $("#target");
$("#source").scroll(function() {
target.prop("scrollTop", this.scrollTop)
.prop("scrollLeft", this.scrollLeft);
});
})();
</script>
</body>
</html>
Solution with Vanilla JavaScript
const multiElementScroll = ( elem1, elem2 ) => {
elem1.onscroll = function() {
elem2.scrollTop = this.scrollTop;
};
}
multiElementScroll( div1, div2 )
section {
display: flex;
justify-content: space-between;
}
.scroll-box {
width: 200px;
height: 200px;
overflow-y: scroll;
border: 1px solid #d99;
}
.scroll-box h2 { margin-top: 50px; }
<section>
<div class="scroll-box" id="div1">
<h1>A</h1>
<h2>B</h2>
<h2>C</h2>
<h2>D</h2>
<h2>E</h2>
<h2>F</h2>
<h2>G</h2>
<h2>H</h2>
</div>
<div class="scroll-box" id="div2">
<h1>1</h1>
<h2>2</h2>
<h2>3</h2>
<h2>4</h2>
<h2>5</h2>
</div>
<section>