一、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/n/133335.html
