示例頁面
這是一個示例頁面，用于演示如何使用HTML代碼始終顯示瀏覽器滾動條以防止頁面跳動。
當頁面內容不足以填充整個瀏覽器窗口時，我們可以使用上述代碼來確保頁面始終顯示滾動條。
整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
什么是頁面跳動？
在瀏覽網頁時，有時會遇到頁面跳動的情況。頁面跳動指的是當頁面內容不足以填滿整個瀏覽器窗口時，當我們從一個頁面滾動到另一個頁面時，整個頁面會突然跳動或抖動。這種跳動或抖動給用戶帶來了不舒適的體驗，并且可能會影響到頁面的可用性和易用性。
頁面跳動的原因
頁面跳動的原因之一是當頁面的內容不足以填充整個瀏覽器窗口時，瀏覽器會自動隱藏滾動條，從而使頁面寬度變窄。當我們從一個頁面滾動到另一個頁面時，由于頁面寬度的改變，整個頁面會跳動或抖動。
防止頁面跳動的解決方案
為了解決頁面跳動的問題，我們可以使用HTML代碼來始終顯示瀏覽器滾動條。下面是一種常用的方法，通過設置CSS樣式來實現：
在上面的代碼中，我們使用了body元素來設置網頁內容區域的最小寬度為100%，并設置了縱向滾動條的樣式。通過設置min-width: 100%，我們可以確保頁面內容區域始終填充整個瀏覽器窗口的寬度。通過設置-x: hidden，我們可以強制瀏覽器始終顯示縱向滾動條，即使頁面內容沒有超出視區。
示例說明
為了更好地理解如何使用上述代碼防止頁面跳動，我們可以創建一個簡單的示例。下面是一個示例的HTML代碼：
html>
<html>
示例頁面
這是一個示例頁面，用于演示如何使用HTML代碼始終顯示瀏覽器滾動條以防止頁面跳動。
當頁面內容不足以填充整個瀏覽器窗口時，我們可以使用上述代碼來確保頁面始終顯示滾動條。
在上面的示例中，我們在標簽中添加了上述代碼。通過設置.content樣式，我們定義了一個寬度為1000像素的內容區域，并通過margin: 0 auto和padding: 20px將內容居中并添加了一些內邊距。
當我們在瀏覽器中打開這個示例頁面時，即使頁面內容不足以填充整個瀏覽器窗口，頁面也不會跳動或抖動。瀏覽器始終會顯示縱向滾動條，以確保用戶可以使用滾動條滾動頁面內容。
總結
在本文中，我們介紹了如何使用HTML代碼始終顯示瀏覽器滾動條以防止頁面跳動。通過設置body元素的樣式，我們可以確保頁面內容區域始終填充整個瀏覽器窗口的寬度，并強制瀏覽器始終顯示縱向滾動條，從而避免頁面跳動的問題。通過示例代碼的演示，我們可以更好地理解如何實現這一效果。希望本文對您有所幫助！
vue獲取滾動條的滑塊
文章目錄
1、vue2獲取滾動條位置
方式
export default {
name: "demo",
data() {
return {
scrollTopVal: 0,
isScroll: 0
};
},
mounted() {
this.$nextTick(() => {
// 開啟滾動條監聽
document.addEventListener("scroll", this.scrollTop, true);
let elVal = document.getElementsByClassName('el-drawer__body')[0];
this.isScroll = elVal.scrollHeight > elVal.clientHeight;
});
},
beforeDestroy() {
document.removeEventListener('scroll', this.scrollTop, true);
},
methods: {
scrollTop() {
let elVal = document.getElementsByClassName('el-drawer__body')[0];
this.scrollTopVal = elVal.scrollTop;
}
}
};
window方式
export default {
name: "demo",
data() {
return {
scrollTopVal: 0,
isScroll: 0
};
},
mounted() {
this.$nextTick(() => {
// 開啟滾動條監聽
window.addEventListener("scroll", this.scrollTop, true);
let elVal = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset;
this.isScroll = elVal.scrollHeight > elVal.clientHeight;
});
},
beforeDestroy() {
window.removeEventListener('scroll', this.scrollTop, true);
},
methods: {
scrollTop() {
let elVal = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset;
this.scrollTopVal = elVal.scrollTop;
},
}
};
2、vue3獲取滾動條位置
公共部分
import { nextTick, ref, onMounted, onBeforeUnmount } from "vue";
let scrollTopVal = ref<number>(0);
let isScroll = ref<boolean>(false);
方式
onMounted(() => {
// 監聽滾動條位置
document.addEventListener("scroll", scrollTop, true);
// 設置對應元素的滾動條
let elVal: any = document.getElementsByClassName('el-drawer__body')[0];
// 判斷是否存在滾動條
isScroll.value = elVal.scrollHeight > elVal.clientHeight;
});
// 實時滾動條高度
const scrollTop = () => {
nextTick(() => {
let elVal: any = document.getElementsByClassName('el-drawer__body')[0];
scrollTopVal.value = elVal.scrollTop;
});
};
onBeforeUnmount(() => {
// 參數必須和掛載時保持一致
document.removeEventListener('scroll', scrollTop, true);
});
window方式
onMounted(() => {
// 監聽滾動條位置
window.addEventListener('scroll', scrollTop, true);
let elVal: any = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset;
isScroll.value = elVal.scrollHeight > elVal.clientHeight;
});
// 實時滾動條高度
const scrollTop = () => {
nextTick(() => {
let elVal: any = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset;
scrollTopVal.value = elVal.scrollTop;
});
};
onBeforeUnmount(() => {
// 參數必須和掛載時保持一致
window.removeEventListener('scroll', scrollTop, true);
});
3、解析
1、獲取指定元素的滾動條值。在組件中需要通過class獲取，因為id是動態值。
2、使用window方式時，只能檢測到body或頁面窗口的滾動條。然而對于的彈窗等組件獲取到的滾動條值為0。
3、第三個參數表示深度監聽，在某些場景如果不設置第三個參數值為true，可能監聽不到對應的事件。
4、第二個參數需要一個函數值，可以直接以函數的形式寫在里面，但是不推薦這樣寫。
5、第一個參數便是對應的事件名稱，有滾動事件和鼠標事件等其他事件。
6、必須銷毀scroll事件，因為是vue是單頁面應用，如果不銷毀，離開該頁面后事件依然會存在，影響瀏覽器的性能，并且在vue3中直接報錯。所以在離開此頁面之前應該銷毀全局監聽事件，可以在組件銷毀之前銷毀全局監聽事件。
4、判斷是否存在滾動條
判斷是否存在滾動條的需求，在彈窗插件中使用得較多。因為彈窗大多會添加: hidden;屬性，如果頁面超過一屏的話，添加這個屬性之后頁面會有晃動。
為了增強用戶體驗，通過判斷是否有滾動條而添加margin-left屬性以抵消: hidden;之后的滾動條位置。
判斷豎向滾動條
console.log(el.scrollHeight > el.clientHeight);
判斷橫向滾動條
console.log(el.scrollWidth > el.clientWidth);
特殊情況
當元素指定: hidden;時，不會出現滾動條。所以需要對元素是否應用了: hidden;進行判斷。
function hasScrolled(ele, dir = "vertical") {
// 判斷的方向是否設置了overflow: hidden;
let style = window.getComputedStyle(ele);
if (
(dir == "vertical" && style.overflowY == "hidden") ||
(dir == "horizontal" && style.overflowX == "hidden")
)
return false;
// 在判斷完overflow不為hidden后，再通過兩個屬性來判斷。
if (dir == "vertical") {
return ele.scrollHeight > ele.clientHeight;
} else {
return ele.scrollWidth > ele.clientWidth;
}
}
但是，以上的方法不嚴謹，當容器產生外邊距合并的時候，也是ele. > ele.。
<div class="box">
<h1>子元素內部內容h1>
div>
let box = document.querySelector(".box");
// scrollHeight: 63
console.log("scrollHeight: " + box.scrollHeight);
// clientHeight: 42
console.log("clientHeight: " + box.clientHeight);
// 是否有滾動條: true
console.log("是否有滾動條: ", box.scrollHeight > box.clientHeight);
特殊情況較完美的處理方式
function hasScrolled(ele, dir = "vertical") {
let eleScroll = dir == "vertical" ? "scrollTop" : "scrollLeft";
// 判斷scroll數值是否為0，還是其他值
let result = !!ele[eleScroll];
// 如果是其他數值(非0)這表示有滾動條
// 如果是0，則嘗試移動一下滾動條，判斷是否能夠移動
if (!result) {
// 嘗試移動滾動條
ele[eleScroll] = 1;
// 再次確認數值
result = !!ele[eleScroll];
// 恢復原位
ele[eleScroll] = 0;
}
// 得出結果
return result;
}
計算滾動條寬度的方法
因為移動端瀏覽器的滾動條都是不占據頁面寬度的透明樣式，所以為了進一步增強用戶體驗，我們還需要計算滾動條的寬度，根據情況添加合理的margin-left值。
新建一個帶有滾動條的div元素，再計算該元素和的差值。
function getScrollbarWidth() {
let scrollDiv = document.createElement("div");
scrollDiv.style.cssText = "width: 99px; height: 99px; overflow: scroll; position: absolute; top: -9999px;";
document.body.appendChild(scrollDiv);
let scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
document.body.removeChild(scrollDiv);
return scrollbarWidth;
}
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
