<!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>保持點(diǎn)擊狀態(tài)并向左滑動(dòng)鼠標(biāo)</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>保持點(diǎn)擊狀態(tài)并向右滑動(dòng)鼠標(biāo)</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坐標(biāo)
let currentX = 0; // 獲取每次移動(dòng)的位置
let velocity = 0; // 控制速度
let direction = 0; // 控制左右滑動(dòng)
let momentum = 0.875; // 控制滑動(dòng)距離
let momentumInterval = null;
let velocityInterval = null;
/**
* 鼠標(biāo)移動(dòng)事件
**/
function f(event) {
// 獲取每次移動(dòng)的位置
currentX = event.clientX;
html.scrollLeft = startScroll + (startX - currentX);
}
/**
* 鼠標(biāo)離開.content
**/
content.onmouseleave = function(){
/**
* 移除.content的鼠標(biāo)移動(dòng)事件
* @see f
**/
content.removeEventListener('mousemove', f);
};
/**
* 鼠標(biāo)點(diǎn)擊事件
**/
content.onmousedown = function (event) {
startScroll = html.scrollLeft;
startX = event.clientX;
previousX = startX;
currentX = startX;
clearInterval(velocityInterval);
velocityInterval = setInterval(function () {
// previousX保存上一次移動(dòng)鼠標(biāo)的clientX值
// 慢速移動(dòng)時(shí)currentX與previousX數(shù)值相同或者差值較凶迕省（慢速移動(dòng)鼠標(biāo)一直在一個(gè)點(diǎn)上）
// 快速滑動(dòng)時(shí)鼠標(biāo)左滑previousX大于currentX噪舀，右滑currentX大于previousX
// 原理：當(dāng)快速移動(dòng)時(shí)售滤，松開鼠標(biāo)的時(shí)候已經(jīng)不在當(dāng)時(shí)點(diǎn)擊的點(diǎn)位上菱涤，50毫秒后就出現(xiàn)了2個(gè)變量的數(shù)值差
// 原因：鼠標(biāo)移動(dòng)時(shí)，不會(huì)存儲(chǔ)所有的移動(dòng)信息琉雳。尤其是在快速移動(dòng)鼠標(biāo)時(shí)
velocity = Math.abs(currentX - previousX);
// 正負(fù)數(shù)轉(zhuǎn)換用于控制左右滑動(dòng)
// 左滑動(dòng)為正數(shù)筋夏，右滑動(dòng)為負(fù)數(shù)
direction = (currentX > previousX ? -1 : 1);
previousX = currentX;
}, 50);
/**
* .content添加鼠標(biāo)移動(dòng)事件
* @see f
**/
this.addEventListener('mousemove', f)
};
/**
* 松開鼠標(biāo)事件
**/
content.onmouseup = function () {
let num = 0;
clearInterval(velocityInterval);
clearInterval(momentumInterval);
num = velocity;
// 鼠標(biāo)松開后開始執(zhí)行滑動(dòng)
momentumInterval = setInterval(function () {
// 滑動(dòng)距離
// 滑動(dòng)距離依次減小
html.scrollLeft = html.scrollLeft + (num * direction);
// 數(shù)值依次減小
num *= momentum;
// 小于1銷毀定時(shí)器脑奠，滑動(dòng)結(jié)束
if (Math.abs(num) < 1){
clearInterval(momentumInterval);
}
}, 15);
/**
* 移除.content的鼠標(biāo)移動(dòng)事件
* @see f
**/
content.removeEventListener('mousemove', f);
}
</script>
</body>
</html>
轉(zhuǎn)自：http://www.reibang.com/p/1cf5446d05a8
