Share an interesting effect, not complicated,
The key lies in
A horizontal or vertical layout;
Coordinate operation when rolling;
A 10-millisecond delay;
The code is super simple, just look at it
<! DOCTYPEhtml>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0, the maximum - scale = 1.0, user - scalable = no" />
<meta http-equiv="Page-Enter" content="RevealTrans (Duration = 1.0, the Transition = 0)">
<title>Left and right mirror scrolling</title>
<style type="text/css">
td { height: 50px; }
/* The whole part of the scroll bar must be set */
::-webkit-scrollbar { width: 0; height: 0; background-color: transparent; }
/* Scroll bar track */
::-webkit-scrollbar-track { box-shadow: none; background-color: transparent; }
/* Scroll bar slider button */
::-webkit-scrollbar-thumb { background-color: transparent; box-shadow: none; }
/* Buttons on the top and bottom of the scroll bar */
::-webkit-scrollbar-button { height: 0; background-color: transparent; }
#all { outline: 1px solid #f00; width: 100%; max-width: 500px; margin: auto; height: 300px; overflow-x: hidden; overflow-y: auto; position: relative; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
#fall1.#fall2 { outline: 1px solid #f00; float: left; width: 50%; overflow: auto; }
#fall1 {}
#fall2 {}
</style>
</head>
<body>
<div id="all">
<div id="fall1">
<table border="" cellspacing="" cellpadding="">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> </tr>
<tr> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> </tr>
<tr> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> </tr>
<tr> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> </tr>
<tr> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> </tr>
<tr> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> </tr>
</table>
</div>
<div id="fall2">
<table border="" cellspacing="" cellpadding="">
<tr>
<td>12</td>
<td>11</td>
<td>10</td>
<td>9</td>
<td>8</td>
<td>7</td>
<td>6</td>
<td>5</td>
<td>4</td>
<td>3</td>
<td>2</td>
<td>1</td>
</tr>
<tr> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> </tr>
<tr> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> </tr>
<tr> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> </tr>
<tr> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> </tr>
<tr> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> </tr>
<tr> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> </tr>
</table>
</div>
</div>
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript">
'use strict';
window.onload = function() {
var wf1 = $("#fall1").width()
var wf2 = $("#fall2").width()
var tf1 = $("#fall1 table").width()
var tf2 = $("#fall2 table").width()
var setTimeoutName;
var isFall1Click = false;
var isFall2Click = false;
var fall1Layer = {}
var fall2Layer = {}
$("#fall2").scrollLeft(tf2)
if('ontouchstart' in document.documentElement) {
/ / move
$("#fall1").scroll(function() {
var lin = $("#fall1").scrollLeft()
$("#fall2").scrollLeft(tf2 - wf2 - lin)
})
$("#fall2").scroll(function() {
var lin = $("#fall2").scrollLeft()
$("#fall1").scrollLeft(tf1 - wf1 - lin)
})
} else {
/ / PC
document.getElementById("fall1").onmousedown = function(e) {
clearTimeout(setTimeoutName)
isFall1Click = trueisFall2Click = ! isFall1Click fall1Layer.x = e.layerX + $("#fall1").scrollLeft()
fall1Layer.y = e.layerY + $("#fall1").scrollTop()
}
document.getElementById("fall1").onmousemove = function(e) {
if(isFall1Click && ! isFall2Click) {clearTimeout(setTimeoutName)
setTimeoutName = setTimeout(function() {
var lin = fall1Layer.x - e.layerX
$("#fall1").scrollLeft(lin)
$("#fall2").scrollLeft(tf2 - wf2 - lin)
}, 10)}}document.getElementById("fall1").onmouseup = function(e) {
clearTimeout(setTimeoutName)
isFall1Click = isFall2Click = false
}
/ / = = = = = = = = = = = = = = = = = =
document.getElementById("fall2").onmousedown = function(e) {
clearTimeout(setTimeoutName)
isFall2Click = trueisFall1Click = ! isFall2Click fall2Layer.x = e.layerX + $("#fall2").scrollLeft()
fall2Layer.y = e.layerY + $("#fall2").scrollTop()
}
document.getElementById("fall2").onmousemove = function(e) {
if(isFall2Click && ! isFall1Click) {clearTimeout(setTimeoutName)
setTimeoutName = setTimeout(function() {
var lin = fall2Layer.x - e.layerX
$("#fall2").scrollLeft(lin)
$("#fall1").scrollLeft(tf1 - wf1 - lin)
}, 10)}}document.getElementById("fall2").onmouseup = function(e) {
clearTimeout(setTimeoutName)
isFall1Click = isFall2Click = false
}
/ / = = = = = = = = = = = = = = = = = =
document.onmouseup = function(e) {
clearTimeout(setTimeoutName)
isFall1Click = isFall2Click = false}}}</script>
</body>
</html>
Copy the codeend