<> 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,
Solve in servlet The Chinese output in is a question mark C String function and character function in language MySQL management 35 A small coup optimization Java performance —— Concise article Seven sorting algorithms (java code ) use Ansible Batch deployment SSH Password free login to remote host according to excel generate create Build table SQL sentence Spring Source code series ( sixteen )Spring merge BeanDefinition Principle of Virtual machine installation Linux course What are the common exception classes ?