JS隐藏滚动条

一、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
   
    
   
Item 2
   
    
   
Item 3
   
    
   
Item 4
   
    
   
Item 5
   
    
   
Item 6
   
    ...

  

/* CSS */
.container {
    height: 200px;
    overflow: auto;
}

/* JS */
var container = document.querySelector('.container');
var items = document.querySelectorAll('.item');

for (var i = 0; i < items.length; i++) {
    items[i].addEventListener('click', function() {
        container.scrollTop = this.offsetTop;
    });
}

这个代码使用JS实现了根据选取的元素来控制滚动条的位置。我们在JS代码中遍历了所有需要设置事件的元素，并添加一个click事件监听器。当元素被点击时，回调函数会将容器的scrollTop设置为当前元素的offsetTop，从而使滚动条滚动到指定元素的位置。