這里給大家分享我在網上總結出來的一些知識，希望對大家有所幫助
界面無滾動條
滾動條的優化也有很多種，比如隨便再網上搜索美化瀏覽器滾動條樣式，就會出現些用css去美化滾動條的方案，
那種更好呢？
沒有更好只有更合適
- 像默認的滾動條的話，他能讓你方便摁著往下滑動（他比較寬）特別省勁，不用擔心美化過后變細摁不到問題，
- 美化后的滾動條樣式啊更貼合網站主題，讓用戶體驗更好，
- 無滾動條（滑鼠放上去后出現）這種更適合像一個頁面好多個塊，每個塊的話還很多內容（都有滾動條），如果像這種都默認都出現滾動條的話，也太不美觀了，
那咱們就從無滾動條展開說說！！！
無滾動條設計
比如像
element ui組件內像input的自定義模塊資料過多的時候出現的下拉框內的滾動條，如下圖：
在element-ui里面它其實是有內部組件el-scrollbar在的，那么它是怎么實作無滾動條呢？
如下圖咱們先把:hover勾選上讓滾動條一直處于顯示得狀態，然后咱們再分析他的實作，
當我把樣式稍微修改下，咱們再觀察下圖：
這么看是不是就很明白了 他其實用margin值把整個容器擴大了點然后溢位隱藏，其實滾動潭訓在就是給界面上看不到了而已，
然后它自己用dom畫了個滾動條，如下圖：
經過上面分析，咱們已經很清楚得了解到一個無滾動條是從那個方面實作得了，
- 使用
margin值把滾動條給溢位隱藏掉，- 使用
div自己畫了一個滾動條，方便咱們隱藏、顯示、更改樣式等，
無滾動條實作
那咱們再從細節上拆分下具體實作要考慮那些點：
- 需要計算滾動條得寬度用來
margin擴大得距離（每個界面上得滾動條得寬度是不一樣得）， - 需要計算畫的
div滾動條得高度（這個內容多少會影響滾動條的高度）， - 需要根據滾動條去
transform: translateY(19.3916%);移動咱們自己畫的div滾動條的， - 需要根據摁著畫的
div滾動條，去實際更改需要滾動的高度， - 需要點擊滾動軸的柱子支持跳到目標的滾動位置；
一 計算界面原本滾動條的寬度
計算下界面上原本滾動條的寬度如下：
let scrollBarWidth;
export default function() {
if (scrollBarWidth !== undefined) return scrollBarWidth;
const outer = document.createElement('div');
outer.className = 'el-scrollbar__wrap';
outer.style.visibility = 'hidden';
outer.style.width = '100px';
outer.style.position = 'absolute';
outer.style.top = '-9999px';
document.body.appendChild(outer);
const widthNoScroll = outer.offsetWidth;
outer.style.overflow = 'scroll';
const inner = document.createElement('div');
inner.style.width = '100%';
outer.appendChild(inner);
const widthWithScroll = inner.offsetWidth;
outer.parentNode.removeChild(outer);
scrollBarWidth = widthNoScroll - widthWithScroll;
return scrollBarWidth;
};
先創建了一個
div, 設定成scroll, 然后再在里面嵌套一個沒有滾動條的div設定寬度100%, 獲取到兩者的offsetWidth, 相級訓取到scrollBarWidth，賦值給scrollBarWidth是惰性加載的優化，只需要計算一次就可以了， 具體展現如下圖：
二 計算畫的滾動條的高度height
計算下畫的
div滾動條的高度height，是用當前容器的內部高度 / 容器整個滾動條的高度 * 100計算出百分比;
比如：
const warp = this.$refs.wrap; // 或者使用documnet獲取容器 const heightPercentage = (wrap.clientHeight * 100 / wrap.scrollHeight); // height const widthPercentage = (wrap.clientWidth * 100 / wrap.scrollWidth); // width
決議： 如當前容器高
30px,內容撐起來總共高100px,那么滾動條的高度就是當前容器的30%;
三 計算滾動條需要移動的值
計算畫的
div需要滾動條的高度moveY是， 獲取當前容器滾動的scrollTop/ 當前容器內部高度 * 100：
演算法一：
決議 使用
transform: translateY(0%);是移動的是自己本身的百分比那么（容器滾動的scrollTop/ 當前容器內部高度 * 100）演算法如下：
const warp = this.$refs.wrap; // 或者使用documnet獲取容器 this.moveY = ((wrap.scrollTop * 100) / wrap.clientHeight); this.moveX = ((wrap.scrollLeft * 100) / wrap.clientWidth);
演算法二：
決議：使用定位
top值，這個比較好理解滾動條的滾動 / 容器的滾動總高度 * 100得到百分比，如下：
const warp = this.$refs.wrap; // 或者使用documnet獲取容器 this.moveY = ((wrap.scrollTop * 100) / wrap.scrollHeight); this.moveX = ((wrap.scrollLeft * 100) / wrap.scrollWidth);
把計算出來的
moveY、moveX的方法 系結給scroll滾動事件就可以了，
四 摁著畫的div滾動條 經行拖動
滾動條都是支持拖著上下左右移動的，那咱們也要支持下：
- 獲取當前滾動條的高度或者寬度可以使用
getBoundingClientRect()如下圖： - 獲取拖著移動的距離 就是再滑鼠摁下先計一個當前的
x1、y1監聽move的x2、y2相減就是拖動的距離了， - 獲取到拖動的距離后轉成
transform || top值，
一個簡單的拖動組件如下：
<template>
<div
ref="draggableRef"
:style="style"
>
<slot />
</div>
</template>
<script>
export default {
name: 'DraggableComponent',
props: {
initialValue: {
type: Object,
required: false,
default: () => ({ x: 0, y: 0 }),
},
},
data() {
return {
currentValue: { x: 0, y: 0 },
isDragging: false,
startX: 0,
startY: 0,
diffX: 0,
diffY: 0,
};
},
computed: {
style() {
return `left: ${this.currentValue.x + this.diffX}px; top: ${this.currentValue.y + this.diffY}px`;
},
},
watch: {
initialValue: {
handler(val) {
this.currentValue = https://www.cnblogs.com/smileZAZ/p/val;
},
immediate: true,
},
},
mounted() {
this.$nextTick(() => {
const { draggableRef } = this.$refs;
if (draggableRef) {
draggableRef.addEventListener('mousedown', this.startDrag);
document.addEventListener('mousemove', this.moveDrag);
document.addEventListener('mouseup', this.endDrag);
}
});
},
beforeDestroy() {
const { draggableRef } = this.$refs;
draggableRef.removeEventListener('mousedown', this.startDrag);
document.removeEventListener('mousemove', this.moveDrag);
document.removeEventListener('mouseup', this.endDrag);
},
methods: {
startDrag({ clientX: x1, clientY: y1 }) {
this.isDragging = true;
document.onselectstart = () => false;
this.startX = x1;
this.startY = y1;
},
moveDrag({ clientX: x2, clientY: y2 }) {
if (this.isDragging) {
this.diffX = x2 - this.startX;
this.diffY = y2 - this.startY;
}
},
endDrag() {
this.isDragging = false;
document.onselectstart = () => true;
this.currentValue.x += this.diffX;
this.currentValue.y += this.diffY;
this.diffX = 0;
this.diffY = 0;
},
},
};
</script>
<style>
.draggable {
position: fixed;
z-index: 9;
}
</style>
咱們需要獲取到畫的滾動條的高度，然后根據拖動的距離算出來
transform: translateY(0%);或者top值；
如上面拖動組件 拖動部分代碼就不在重復了 咱們直接用diffX、diffY、lastX、lastY來用了，
diffX、diffY是拖動差的值lastX、lastY是上一次也就是未拖動前的值translateY || top
演算法一(transform)
const thumb = document.querySelector('el-scrollbar__thumb'); // element ui el-scrollbar 的滾動條
const { height: thumbHeight } = thumb?.getBoundingClientRect() || {};
const diffY = 10;
const lastY = '300'; // transform: translateY(300%);`
const moveY = (diffY / thumbHeight) + lastY;
演算法二(top)const thumb = document.querySelector('el-scrollbar__thumb'); // element ui el-scrollbar 的滾動條
const { height: thumbHeight } = thumb?.getBoundingClientRect() || {};
const diffY = 10;
const lastY = 30; // top: 30%`
const moveY = (diffY / wrap.scrollWidth * 100) + lastY;
五 點擊滾動軸使滾動條跳轉到該位置
- getBoundingClientRect 的 top 是獲取到距離瀏覽器頂部的距離， 寫一個點擊事件如下
function clickTrackHandler(event) {
const wrap = this.$refs.wrap;
// 1. 減去clientX 正好能獲取到需要滾動到的位置
const offset = Math.abs(e.target.getBoundingClientRect().top - e.clientX);
// 2. 利用offset 的到畫的滾動條的實際位置 兩種演算法transform || top
const thumb = document.querySelector('el-scrollbar__thumb'); // element ui el-scrollbar 的滾動條
const { height: thumbHeight } = thumb?.getBoundingClientRect() || {};
const translateY = offset / height * 100; // transform
const top = offset / wrap.scrollHeight * 100; // top
// 3、計算實際需要滾動的高度 使界面滾動到該位置，兩種演算法transform(scrollTop2) || top(scrollTop1)
const scrollTop1 = top * wrap.scrollHeight; // top
const scrollTop2 = translateY * wrap.clientHeight; // transform
}
本文轉載于:
https://juejin.cn/post/7227033124856135738
如果對您有所幫助，歡迎您點個關注，我會定時更新技術檔案，大家一起討論學習，一起進步，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/556432.html
標籤：Html/Css
上一篇：如何實作巡檢報告？
下一篇：返回列表