一、js隱藏滾動條但可以滾動
/* CSS */
body {
overflow: hidden;
}
/* JS */
var container = document.querySelector('.container');
var content = document.querySelector('.content');
function updateScrollbar() {
var scrollTop = container.scrollTop;
var scrollHeight = content.scrollHeight;
var height = container.getBoundingClientRect().height;
var scroll = (scrollTop / (scrollHeight - height)) * (height - 10);
scrollbar.style.top = scroll + 'px';
}
container.addEventListener('scroll', updateScrollbar);
var scrollbar = document.createElement('div');
scrollbar.className = 'scrollbar';
container.parentNode.appendChild(scrollbar);
updateScrollbar();
在此代碼中，我們使用CSS隱藏滾動條，通過JS實現自定義的滾動條並讓它在容器內滑動。我們首先通過CSS overflow: hidden;隱去了滾動條，而JS代碼則會添加一個自定義的滾動條元素。當容器滾動時，通過container.addEventListener('scroll', updateScrollbar)監聽滾動事件並執行回調函數updateScrollbar。
回調函數updateScrollbar會計算出容器滾動的位置，將該位置與自定義的滾動條元素進行同步。所以當滾動容器時，自定義的滾動條會滑動。
二、js滾動條滾動到指定的位置
/* JS */
var container = document.querySelector('.container');
container.scrollTop = 400;
這是一個簡單的JS代碼，它會將容器的滾動位置設置為400（像素）。這意味着當代碼運行後，容器會自動滾動到指定位置，達到了滾動條滾動到指定位置的目的。
三、js隱藏滾動條但滾動效果還在
/* CSS */
body {
overflow: hidden;
}
/* JS */
var container = document.querySelector('.container');
var content = document.querySelector('.content');
container.addEventListener('wheel', function(e) {
var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
container.scrollTop -= (delta * 40);
e.preventDefault();
});
window.addEventListener('resize', function() {
container.style.height = window.innerHeight + 'px';
});
window.dispatchEvent(new Event('resize'));
在這個代碼中，我們仍然使用CSS隱去滾動條。但是，我們不再使用自定義的滾動條元素來完成滾動效果。相反，我們監聽容器上的wheel事件，手動計算並設置容器的滾動位置。
在這個示例中，每滾動一次滾輪(delta)就會滾動40個像素。監聽器還會通過e.preventDefault()停止默認的滾動行為。最後，我們監聽窗口的resize事件，以便在容器大小發生更改時更新容器高度。
四、js滾動條滾動到底部
/* JS */
var container = document.querySelector('.container');
container.scrollTop = container.scrollHeight - container.clientHeight;
這個代碼通過設置滾動位置把容器滾動到底部。我們通過獲取滾動容器的scrollHeight(整個內容的高度)和clientHeight(容器可見高度)並相減，從而計算出要滾動的距離，然後將該值賦給scrollTop，滾動條就會自動滾動到底部。
五、cssjs隱藏滾動條
/* CSS */
::-webkit-scrollbar {
display: none;
}
這是CSS中的一個小技巧：通過設置::-webkit-scrollbar選擇器，可以隱藏掉所有webkit內核瀏覽器的滾動條。
/* JS */
var container = document.querySelector('.container');
container.style.overflow = 'hidden';
這個JS代碼直接設置容器的overflow屬性為hidden，與CSS方式相比，可以兼容非webkit內核的瀏覽器。
六、js獲取滾動條滾動的距離
/* JS */
var container = document.querySelector('.container');
var scrollTop = container.scrollTop;
通常情況下，在JS中獲取容器滾動的位移長度非常簡單。只需要通過容器的scrollTop屬性即可獲取到容器的滾動的距離。
七、隱藏滾動條但可以滾動
/* CSS */
body {
overflow: hidden;
}
/* JS */
var container = document.querySelector('.container');
var scrollbar = document.createElement('div');
scrollbar.className = 'scrollbar';
container.parentNode.appendChild(scrollbar);
function updateScrollbar() {
var scrollTop = container.scrollTop;
var scrollHeight = container.scrollHeight;
var height = container.getBoundingClientRect().height;
var scroll = (scrollTop / (scrollHeight - height)) * (height - 10);
scrollbar.style.top = scroll + 'px';
}
container.addEventListener('scroll', updateScrollbar);
window.addEventListener('resize', function() {
container.style.height = window.innerHeight + 'px';
});
window.dispatchEvent(new Event('resize'));
在這個示例中，JS代碼使用了與第一部分類似的代碼，來實現隱藏滾動條但可以滾動的效果。唯一的區別是沒有了容器內的明確的內容，只是有一個容器自帶的滾動條。通過監聽器，JS代碼計算出滾動條的位置，並根據那個位置同時滑動容器的滾動條和自定義的滾動條。
八、js控制滾動條到頁面某個位置
/* JS */
var container = document.querySelector('.container');
var scrollToElement = document.querySelector('#scrollToElement');
container.scrollTop = scrollToElement.offsetTop;
這個JS代碼可以讓滾動條控制滾動到某個頁面位置。我們首先獲取了要滾動到的元素(scrollToElement)，然後直接設置容器的scrollTop屬性為該元素的offsetTop。這將使容器滾動到指定的元素。
九、js滾動條滾動事件
/* JS */
var container = document.querySelector('.container');
container.addEventListener('scroll', function() {
console.log('Container scrolled!');
});
這個代碼利用容器上的scroll事件來監聽滾動條的滾動。每當容器滾動時，該回調函數就會被執行。這種方法適用於滾動條每次滾動都需要執行一些相關代碼的情況。
十、js控制滾動條滾動選取
/* HTML */Item 1
原創文章，作者：QDCN，如若轉載，請註明出處：https://www.506064.com/zh-hk/n/133335.html
微信掃一掃 
支付寶掃一掃 