<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> html,body{ height: 100%; padding: 0; margin: 0; } body { overflow: hidden; } .box{ width: 10000px; height: 100%; display: flex; align-items: center; justify-content: center; } .content { width: 100%; height: 80%; display: flex; margin-left: 50px; margin-right: 50px; Box-shadow: 0 2REM 4rem 0.25 REM Rgba (46, 43, 55, 0.575); cursor: grab; } .content:active{ cursor: grabbing; } p{ margin: 0; display: flex; justify-content: center; align-items: center; flex-direction:column ; width: 100%; height: 100%; color: #ffffff; font-size: 30px; } </style> </head> <body> <div class="box"> <div class="content"> <p style="background: <span> </span>< p style="background: #6c5e86" draggable="false"> <p style=" olive" draggable="false"> <p style="background: </span></p> </div> </div> <script> let doc= document; let html = doc.querySelector('html'); let content = doc.querySelector('.content'); Onselectstart = function(){return false; }; let startScroll = 0; let startX = 0; let previousX = 0; // Save the last clientX coordinates let currentX = 0; // Let velocity = 0; // let direction = 0; // Let momentum = 0.875; // Let momentumInterval = null; let velocityInterval = null; /** */ function f(event) {currentX = event. ClientX; html.scrollLeft = startScroll + (startX - currentX); } /** * Mouse away. Content **/ content.onmouseleave = function() content.removeEventListener('mousemove', f); }; /** * onmouseDown = function (event) {startScroll = html.scrollLeft; startX = event.clientX; previousX = startX; currentX = startX; clearInterval(velocityInterval); VelocityInterval = setInterval(function () {// previousX saves the clientX value of the last mouse move // CurrentX has the same value or smaller difference with previousX when moving slowly (the mouse cursor is always on the same point). // When sliding quickly, previousX is greater than previousX when sliding left, and currentX is greater than previousX when sliding right. // Principle: When the mouse is moving fast, it is not at the clicked point when it is released. After 50 ms, the value difference of 2 variables appears // Reason: When the mouse is moving, it does not store all movement information. Velocity = math.abs (currentx-previousx); Direction = (currentX > previousX? 1:1); previousX = currentX; }, 50); /** *.content Add mouse movement event * @see f **/ this.adDeventListener ('mousemove', f)}; Onmouseup = function () {let num = 0; clearInterval(velocityInterval); clearInterval(momentumInterval); num = velocity; MomentumInterval = setInterval(function () {html.scrollLeft = html.scrollLeft + (num  * direction); // Num *= momentum; If (math.abs (num) < 1){clearInterval(momentumInterval); }}, 15); / * * * removed. The content of the mouse events * @'s f * * / content. removeEventListener (' mousemove, f); } </script> </body> </html>Copy the code