clientX 滑鼠相對于浏覽器左上角x軸的坐标; 不随滾動條滾動而改變;
clientWidth =width+左右padding
offsetWidth=width+左右padding+左右border
srollWidth:指定标簽内容曾的真實寬度,包含可視區域和被隐藏區域
offsetLeft:目前元素 左邊框 外邊緣 到 最近的已定位父級(offsetParent) 左邊框 内邊緣的 距離。如果父級都沒有定位,則分别是到body 頂部 和左邊的距離
原生JS案例(面向對象)——按住滑鼠實作左右拖動清單
JS中的位置和寬度:clientWidth、offsetWidth、scrollWidth等差別
html
<div class="history-header">
<div class="progress-bar">
<div v-for="(item, index) in dateData" :key="index">
<div
class="node"
@click="activeClick(index)"
:class="nodeIndex == index ? 'active' : 'node'"
>
<div class="node-text">{{ item.date }}</div>
<div class="node-icon"></div>
</div>
<div
class="line"
:class="index == 7 ? 'line_active' : 'line'"
></div>
</div>
<!-- 漸變線 -->
<div class="line line_gradual"></div>
<div class="more el-icon-arrow-right" @click="nextClick()"></div>
</div>
</div>
<div class="history-content">
<div class="history-list" @mousedown="slidDown($event)">
<div
class="history-item"
v-for="item in historyitem"
:key="item.time"
>
<div class="time">{{ item.time }}</div>
<div class="list">
<div>{{ item.text1 }}</div>
<div>{{ item.text2 }}</div>
</div>
</div>
</div>
</div>
css
<style>
&-content {
width: 85%;
height: 300px;
max-width: 1640px;
margin: auto;
margin-top: 48px;
text-align: left;
position: relative;
overflow: hidden;
.history-list {
width: 80%;
position: absolute;
display: flex;
}
.history-item {
margin-right: 16px;
display: inline-block;
.list {
width: 400px;
}
.time {
margin-bottom: 24px;
font-size: 32px;
font-weight: bold;
line-height: 32px;
color: #1f364d;
}
}
}
</style>
頁面效果:
并且拖動時,上方的點跟着移動
![](https://img.laitimes.com/img/__Qf2AjLwojIjJCLyojI0JCLiAzNfRHLGZkRGZkRfJ3bs92YsYTMfVmepNHL4lkeNhXSq1UeRpHW4Z0MMBjVtJWd0ckW65UbM5WOHJWa5kHT20ESjBjUIF2X0hXZ0xCMx81dvRWYoNHLrdEZwZ1Rh5WNXp1bwNjW1ZUba9VZwlHdssmch1mclRXY39CXldWYtlWPzNXZj9mcw1ycz9WL49zZuBnLiFjMyATYmZTN3QzN1UjY5UDOlRTZlJmNhFmMmNjZ1Y2Lc52YucWbp5GZzNmLn9Gbi1yZtl2Lc9CX6MHc0RHaiojIsJye.png)
js
<script>
slidDown(e) {
// 取消預設行為
if (e.preventDefault) {
e.preventDefault();
} else {
return false;
}
// 擷取dom元素=_wrap
this.box = document.querySelector(`.history-content`);
// =_list
this.list = this.box.querySelector(".history-list");
// =_lis
this.item = this.list.querySelector(".history-item");
// 設定w為list的寬度, list的寬度跟随item的數量動态變化
let w = this.item.offsetWidth * this.historyitem.length;
console.log(this.historyitem.length,'jjjjj');
// 擷取目前距離及最大移動距離
let disX = e.clientX;
let oldLeft = this.list.offsetLeft;
let maxL = w - this.box.offsetWidth;
// list沒有比content長的情況下
if (maxL <= 0) return;
this.list.style.width = w + "px";
// 滑鼠移動時
document.onmousemove = (e) => {
e = e || window.event;
//移動的距離
let nowL = oldLeft + e.clientX - disX;
// 取到移動的item的index值,判斷與icon的index值,改變樣式
let nowindex = -parseInt(nowL / this.item.offsetWidth);
// console.log(nowindex);
if (nowindex !== this.nodeIndex) {
this.nodeIndex = nowindex;
}
console.log(nowL);
//向左移動,保持第一個不動
if (nowL >= 0) nowL = 0;
// 向右移動
if (-1 * nowL >= maxL) {
nowL = -1 * maxL;
}
this.list.style.left = nowL + "px";
// 比較index值,增删樣式
};
// 滑鼠彈起時
document.onmouseup = () => {
document.onmousemove = null;
};
},
</script>
考慮3種情況:
(1)list沒有充滿content
(2)list向左,直到最左
(3)list向右,直到最有