<!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.25rem 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: #2e2b37" draggable="false">內(nèi)容一<span>保持點擊狀態(tài)并向左滑動鼠標</span></p>
<p style="background: #6c5e86" draggable="false">內(nèi)容二</p>
<p style="background: olive" draggable="false">內(nèi)容三</p>
<p style="background: #de7172" draggable="false">內(nèi)容四<span>保持點擊狀態(tài)并向右滑動鼠標</span></p>
</div>
</div>
<script>
let doc= document;
let html = doc.querySelector('html');
let content = doc.querySelector('.content');
// 禁止選中文字
doc.onselectstart = function(){return false;};
let startScroll = 0;
let startX = 0;
let previousX = 0; // 保存上一次的clientX坐標
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);
}
/**
* 鼠標離開.content
**/
content.onmouseleave = function(){
/**
* 移除.content的鼠標移動事件
* @see f
**/
content.removeEventListener('mousemove', f);
};
/**
* 鼠標點擊事件
**/
content.onmousedown = function (event) {
startScroll = html.scrollLeft;
startX = event.clientX;
previousX = startX;
currentX = startX;
clearInterval(velocityInterval);
velocityInterval = setInterval(function () {
// previousX保存上一次移動鼠標的clientX值
// 慢速移動時currentX與previousX數(shù)值相同或者差值較小（慢速移動鼠標一直在一個點上）
// 快速滑動時鼠標左滑previousX大于currentX，右滑currentX大于previousX
// 原理：當快速移動時，松開鼠標的時候已經(jīng)不在當時點擊的點位上，50毫秒后就出現(xiàn)了2個變量的數(shù)值差
// 原因：鼠標移動時，不會存儲所有的移動信息。尤其是在快速移動鼠標時
velocity = Math.abs(currentX - previousX);
// 正負數(shù)轉(zhuǎn)換用于控制左右滑動
// 左滑動為正數(shù)，右滑動為負數(shù)
direction = (currentX > previousX ? -1 : 1);
previousX = currentX;
}, 50);
/**
* .content添加鼠標移動事件
* @see f
**/
this.addEventListener('mousemove', f)
};
/**
* 松開鼠標事件
**/
content.onmouseup = function () {
let num = 0;
clearInterval(velocityInterval);
clearInterval(momentumInterval);
num = velocity;
// 鼠標松開后開始執(zhí)行滑動
momentumInterval = setInterval(function () {
// 滑動距離
// 滑動距離依次減小
html.scrollLeft = html.scrollLeft + (num * direction);
// 數(shù)值依次減小
num *= momentum;
// 小于1銷毀定時器，滑動結(jié)束
if (Math.abs(num) < 1){
clearInterval(momentumInterval);
}
}, 15);
/**
* 移除.content的鼠標移動事件
* @see f
**/
content.removeEventListener('mousemove', f);
}
</script>
</body>
</html>
轉(zhuǎn)自：http://www.itdecent.cn/p/1cf5446d05a8
