如何优雅地美化网页滚动条？

一、选用CSS样式

网页滚动条的美化在CSS当中有很多的样式可以选择。可以使用伪元素时，这些样式能够为滚动条添加很棒的边框效果、渐变颜色和良好的滚动体验。

/*纯色边框*/
::-webkit-scrollbar{
    width: 10px; 
    height: 10px;
    background-color: #eee;
}
/*渐变色边框*/
::-webkit-scrollbar-thumb{
    background-image:-webkit-gradient(linear,left bottom,left top,
        color-stop(0.44, rgb(230,53,53)),
        color-stop(0.72, rgb(226,129,129)),
        color-stop(0.86, rgb(222,191,191)),
        color-stop(1, #ccc));
}

这里仅展示出两种样式，用户可以根据自己的需要自定义样式。

二、使用插件

在使用网页滚动条插件之前，需要在HTML文件中引入jquery和插件文件。

<script src="//cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>

<script src="//cdn.bootcss.com/mCustomScrollbar/3.0.9/jquery.mCustomScrollbar.min.js"></script>

接着，我们可以来展示一个具有非常酷炫效果的滚动条插件样式。

/*CSS样式*/
::-webkit-scrollbar{
    width: 6px;
    height:6px;
    background-color: #fff;
}

::-webkit-scrollbar-thumb{
    border-radius: 4px;
    background-color: rgba(0,0,0,.1)
}

::-webkit-scrollbar-thumb:hover{
    background-color: rgba(0,0,0,.2);
}

::-webkit-scrollbar-track-piece{
    background-color: #F5F5F5;
}

/*插件启用*/
$(document).ready(function(){
    $("#scrollbar").mCustomScrollbar();
});



   

    
    

        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sollicitudin mi
        tortor, eu ullamcorper sapien tristique quis. Sed leo enim, placerat nec metus
        nec, egestas tincidunt ipsum. Nulla facilisi. Vivamus finibus vestibulum neque,
        sed tincidunt nibh lobortis varius. Donec a rutrum eros. Sed mollis eros vitae
        nisi tempor finibus. Mauris eleifend malesuada odio, quis iaculis nulla pharetra
        sed. Fusce ultricies gravida elit nec mollis. Nam eget urna nibh. Suspendisse
        consectetur sodales libero. Mauris sed neque neque. Nam in orci at massa elementum
        feugiat a eget quam. In nec elit sodales, bibendum ipsum vel, pharetra erat.
        Praesent quis orci eu sem vestibulum interdum id id risus.
    

   

使用插件能够快速地让滚动条美化并且提升用户的体验。

三、自制滚动条

如果想要更多地控制滚动条的样式和特效，可以自制滚动条。自制滚动条的方式为使用CSS和原生JavaScript编写。

/*CSS样式*/
.scrollbar-outer {
    background: #F3F3F3;
    border-radius: 10px;
    padding: 0 0 0 20px;
    overflow: hidden;
}
.scrollbar {
    background-color: #777;
    border-radius: 10px;
    height: 10px;
    transition-duration: 0.2s;
    transition-timing-function: ease-in-out;
}
.scrolled {
    background-color: #E8593D;
}

/*JavaScript代码*/
function scrollbar_init() {
    var wrapper = document.getElementById('scrollbar-outer');
    var scrollbar = document.createElement('div');
    scrollbar.setAttribute('class', 'scrollbar');
    wrapper.appendChild(scrollbar);

    scrollbar.addEventListener('mousedown', function (e) {
        //记录鼠标位置
        var offset = e.offsetX;

        document.addEventListener('mousemove', function (e) {
            //计算鼠标移动后的位置
            scrollbar.style.width = (e.pageX - wrapper.offsetLeft - offset) + 'px';

            //判断鼠标是否移动到边缘进行限制
            if (scrollbar.offsetWidth <= 0) {
                scrollbar.style.width = '0px';
            }
            if (scrollbar.offsetWidth >= (100 - wrapper.offsetLeft)) {
                scrollbar.style.width = (100 - wrapper.offsetLeft) + 'px';
            }

            //滚动元素
            var parent = wrapper.parentNode;
            parent.scrollTop = (parent.scrollHeight - parent.offsetHeight) * (scrollbar.offsetWidth / (100 - wrapper.offsetLeft));
        }, false);

        //移除事件监听器
        document.addEventListener('mouseup', function (e) {
            document.removeEventListener('mousemove', arguments.callee, false);
        }, false);

    }, false);

    //监听元素滚动
    wrapper.addEventListener('scroll', function (e) {
        var scrollbar = this.childNodes[1];
        scrollbar.style.width = (this.scrollTop / ((this.scrollHeight - this.offsetHeight) / (100 - 20))) + "%";

        //判断是否滚到底部，进行特殊处理
        if ((this.scrollHeight - this.offsetHeight - this.scrollTop) <= 1) {
            scrollbar.classList.add('scrolled');
        } else {
            scrollbar.classList.remove('scrolled');
        }
    }, false);
}

这段代码实现了一个非常简单的自制滚动条。用户可以自由定制其中的样式和特效，并且可以通过JavaScript调整滚动条的位置和宽度。