我的意圖是在滾動后隱藏我的滾動條（即通過向右滑動隱藏）（比如說，在我完成滾動后 2 或 3 秒）
并讓它再次可見，一旦我開始滾動（即，通過從右側滑入可見）
查看代碼片段：
div::-webkit-scrollbar {
width: 8px;
/* helps remove scrollbar which resizes or shifts list items */
/* display: none; */
}
div::-webkit-scrollbar-track {
background-color: #444444;
}
div::-webkit-scrollbar-button:vertical:increment {
background-color: rgba(108, 92, 231, 0.65);
}
div::-webkit-scrollbar-button:vertical:decrement {
background-color: rgba(108, 92, 231, 0.65);
}
div::-webkit-scrollbar-thumb {
background-color: rgba(108, 92, 231, 0.7);
border-radius: 10px;
}
div::-webkit-scrollbar-thumb:hover {
background-color: rgba(108, 92, 231, 1);
}
div {
width: 500px;
height: 300px;
background-color: #ececec;
overflow: auto;
}<div>
<p style="height: 300vh;">Just some tall paragraph to force DIV scrollbars....</p>
</div>請大家幫助我（我會很感激的！）
:D
uj5u.com熱心網友回復：
由于 CSS 沒有超時和清除超時 - 使用 JavaScript
- 用于
Element.classList添加和刪??除類 - 使用
setTimeout()設定為 2500 毫秒，但每次觸發滾動事件時，使用clearTimeout. 從邏輯上講，在您完成滾動設定的最后一個超時后，2.5 秒后最終觸發類洗掉。 - 使用 CSS 類
.is-scrolling來定義所需的滾動條樣式（否則默認情況下是透明的）
const showScrollbars = (evt) => {
const el = evt.currentTarget;
clearTimeout(el._scrolling); // Cancel pending class removal
el.classList.add("is-scrolling"); // Add class
el._scrolling = setTimeout(() => { // remove the scrolling class after 2500ms
el.classList.remove("is-scrolling");
}, 2500);
};
document.querySelectorAll("[data-scrollbars]").forEach(el => {
el.addEventListener("scroll", showScrollbars);
});[data-scrollbars] {
width: 500px;
height: 180px;
background-color: #ececec;
overflow: auto;
}
[data-scrollbars]::-webkit-scrollbar {
width: 8px;
height: 8px;
}
[data-scrollbars]::-webkit-scrollbar-track {
background-color: transparent;
}
[data-scrollbars]::-webkit-scrollbar-thumb {
background-color: transparent;
border-radius: 10px;
}
[data-scrollbars].is-scrolling::-webkit-scrollbar-track {
background-color: #777;
}
[data-scrollbars].is-scrolling::-webkit-scrollbar-thumb {
background-color: gold;
}<div data-scrollbars>
<p style="height: 300vh;">
Just some tall paragraph to force DIV scrollbars...<br>
Scroll me! (<<< PS: See the problem?!)
</p>
</div>我強烈不建議您隱藏滾動條。滾動條是向用戶提供實際要滾動的內容的視覺提示。做一個簡單的 A/B 測驗。對于一半的訪問者顯示滾動條。對于另一半，做那些時髦的事情——不要驚訝于你的應用程式（或元素）的首屏部分的點擊率與第二組用戶的互動更少甚至沒有.
uj5u.com熱心網友回復：
我正在考慮如果用戶沒有任何用于滾動的滑鼠滾輪以及用戶是否使用實際使用的滾動條滾動。無論如何，請在谷歌搜索苗條的褪色滾動條示例。你會發現一些關于纖細卷軸的例子，它可能不是隱形的，但它是透明的并且形狀很好。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/419387.html
標籤：
上一篇：如何從剪輯元素中洗掉空格？