<> Horizontal and vertical synchronized scrolling of scroll bar in project scene

<>1. Project scenarios :

Tips : There is an automatic data comparison tool in the project, which needs to monitor and scroll the view in both directions :

<>2. Property description :

Tips : There are several attribute values that need to be understood :
// Vertical scroll bar // scrollHeight;---------> Rolling height // clientHeight;---------> Height of slider //
scrollTop; ---------> Distance rolled lengthwise // Horizontal scroll bar // scrollWidth;---------> Scrollable width //
clientWidth;---------> Width of slider // scrollLeft; ---------> Distance rolled horizontally
<>3. Thinking analysis :

Tips :
Listen to a scroll bar in the same direction , When the scroll bar scrolls , Gets the position of the scroll bar in the same direction , Then change the position of another scroll bar in the same direction ;.

<>4. Solution :

Code directly : It is suggested that you tap the code to understand

<>1. Style code :
<style> .box { width: 1200px; overflow: auto; margin: 20px auto; } .box
.box-show { display: flex; } .box .box-title { font-size: 30px; text-align:
center; margin: 30px auto; } .box .box-left, .box .box-right { width: 50%;
height: 500px; border: 1px solid #ccc; overflow: scroll; } .box ol > li {
white-space: nowrap; } </style>
<>2.html code
<div class="box"> <div class="box-title"> Scroll bar horizontal vertical synchronous scroll </div> <div class="box-show
"> <div class="box-left"> <ol> <li>
We came to this world with tears in our eyes , And left the world in other people's tears and cries , The middle process is called life . life , It's on one side , Lost on one side ; Choose on one side , Give up .</li> <li>
life , How can everything go well , life , How can everything go well .</li> <li> Some people can't afford it ,</li> <li> It doesn't matter to put it down </li> <li> Be true to the past ,.</li> <li
> Don't take reality seriously ,</li> <li> Because it's going on </li> <li> People should be able to afford it , We have to put it down .</li> <li> To be able to afford is to survive ,</li> <li> It's life ;
</li> <li> Affordability is ability ,</li> <li> It's wisdom </li> <li> Some people can afford it , But I can't let it go </li> <li> I can't afford it , Will be mediocre ;</li>
<li> can't let go , You'll be exhausted </li> <li> There are many things to put down in life .</li> <li> Only to put down those unnecessary burdens ,</li> <li> Only in this way can we move forward smartly .
</li> <li> Once beautiful stay in the bottom of my heart ,</li> <li> Once the sadness in the back of my mind ,</li> <li> No love, no hate </li> <li> The past is the past </li> <li>
The man , That thing , That feeling , Whatever you want , It's all smoke </li> <li> Learn to let go </li> <li> Life is always from farewell to tomorrow .</li> <li>
Contented life makes us feel calm , Serenity , philosophical , Detachment , Don't be influenced by all kinds of troubles in the world </li> <li> It is a realm of wisdom </li> <li> Not picky about life </li> <li
> Not demanding , No resentment , No greed , No misunderstanding , No doubt </li> </ol> </div> <div class="box-right"> <ol> <li>
We came to this world with tears in our eyes , And left the world in other people's tears and cries , The middle process is called life . life , It's on one side , Lost on one side ; Choose on one side , Give up .</li> <li>
life , How can everything go well , life , How can everything go well .</li> <li> Some people can't afford it ,</li> <li> It doesn't matter to put it down </li> <li> Be true to the past .</li> <li>
Don't take reality seriously ,</li> <li> Because it's going on </li> <li> People should be able to afford it , We have to put it down .</li> <li> To be able to afford is to survive ,</li> <li> It's life ;
</li> <li> Affordability is ability ,</li> <li> It's wisdom </li> <li> Some people can afford it , But I can't let it go </li> <li> I can't afford it , Will be mediocre ;</li>
<li> can't let go , You'll be exhausted </li> <li> There are many things to put down in life .</li> <li> Only to put down those unnecessary burdens ,</li> <li> Only in this way can we move forward smartly .
</li> <li> Once beautiful stay in the bottom of my heart ,</li> <li> Once the sadness in the back of my mind ,</li> <li> No love, no hate </li> <li> The past is the past </li> <li>
The man , That thing , That feeling , Whatever you want , It's all smoke </li> <li> Learn to let go </li> <li> Life is always from farewell to tomorrow .</li> <li>
Contented life makes us feel calm , Serenity , philosophical , Detachment , Don't be influenced by all kinds of troubles in the world </li> <li> It is a realm of wisdom </li> <li> Not picky about life </li> <li
> Not demanding , No resentment , No greed , No misunderstanding , No doubt </li> </ol> </div> </div> </div>
<>3.JS code :
<script type="text/javascript"> var l = document.querySelector(".box-left");
// Get the elements of the box on the left var r = document.querySelector(".box-right"); // Get the elements of the box on the right var
scaleY= (l.scrollHeight - l.clientHeight) / (r.scrollHeight - r.clientHeight);
// Vertical roll ratio var scaleX = (l.scrollWidth - l.clientWidth) / (r.scrollWidth - r.
clientWidth); // Horizontal roll ratio var isRoll = true; // Rolling synchronization Boolean l.addEventListener(
"mouseover", function () { // Monitor the location of the mouse scroll event isRoll = false; l.
addEventListener("scroll", function () { // monitor scroll event if (!isRoll) { r.scrollTop
= l.scrollTop / scaleY; // Correlation by proportion r.scrollLeft = l.scrollLeft / scaleX; } });
}); r.addEventListener("mouseover", function () { isRoll = true; r.
addEventListener("scroll", function () { if (isRoll) { l.scrollTop = r.scrollTop
/ scaleY; l.scrollLeft = r.scrollLeft * scaleX; } }); }); </script>

Technology
©2019-2020 Toolsou All rights reserved,
Huawei 2021 session Hardware Engineer Logical post (FPGA) Super detailed surface !!!Vue-element-admin upgrade ui edition virtual machine VMware Download and install the most detailed tutorial !C++ Move constructor and copy constructor sound of dripping water java Backstage interview pygame Realize full screen mode and adjustable window size mysql Database setting character set configuration modification my.ini file (windows)30 What's the experience of being a junior programmer at the age of 20 C++ Multithreading programming ( Summary of common functions and parameters )python_ cherry tree