在网页中，当我们需要展示多个内容时，经常会使用到滚动条来进行内容的滑动展示。而默认的滚动条样式往往不太美观，给网页带来一些瑕疵。因此，我们需要自定义滚动条样式，让网页更为优美。

今天，我将重点介绍一种优雅的div滚动条自定义样式，并手把手教大家实现。

一、调用JQuery库

首先，我们需要调用JQuery库，JQuery是一种功能丰富、操作便捷、应用广泛的JavaScript库。以下是JQuery库的调用：

二、自定义CSS样式

接下来，我们需要自定义CSS样式，先给外层div设置宽度，高度，以及溢出隐藏。

div.content{

width: 300px;

height: 200px;

overflow: hidden;

}

然后定义滑动条的外层div，宽度和高度与上面的div相同，并设置绝对布局方式及z-index为1。

.div-scroll{

position: absolute;

top: 0;

right: 0;

width: 10px;

height: 100%;

z-index: 1;

}

定义滑动条的背景，边框、圆角等。实现的效果就是滑动条为一个小块，中间有一个白色的圆形，美观且简洁。

.div-scroll-box{

background: #ddd;

border-radius: 5px;

opacity: .5;

position: relative;

}

.div-scroll-box i{

background: #fff;

border-radius: 50%;

position: absolute;

}

最后，定义滑动条的红色部分，也就是我们常见的进度条效果。将其宽度设为100%，高度、圆角与外部滑动条相同。将其宽度通过JS代码进行控制。

.div-scroll-process{

background-color: #f00;

border-radius: 5px;

height: 0%;

left: 0;

position: absolute;

top: 0;

transition: .3s height;

width: 100%;

}

代码实现如下：

$(function(){

var content = $('.content'),

scroll = $('.div-scroll'),

scrollBox = $('.div-scroll-box'),

scrollProcess = $('.div-scroll-process');

var contentHeight = content[0].scrollHeight,

contentTop = content.offset().top,

contentHeight2 = contentHeight - content.outerHeight(true),

scrollRange = scroll.outerHeight(true) - scrollBox.outerHeight(true);

scrollRange = scrollRange < 0 ? 0 : scrollRange;

scrollBox.height(scroll.outerHeight(true) / contentHeight * content.outerHeight(true));

function move() {

var t = content.scrollTop() / contentHeight2 * scrollRange;

scrollProcess.css('height', scrollBox.outerHeight(true) + t);

}

move();

content.on('scroll', move);

scrollBox.on('mousedown', function(e){

var y = e.pageY,

top = parseInt(scrollBox.css('top'));

$(document).on('mousemove', function(e){

var scrollTop = content.scrollTop(),

dis = e.pageY - y,

moveDis = dis / scrollRange * contentHeight2;

top += dis;

if(top < 0) {

top = 0;

moveDis = -scrollTop;

}

if(top > scrollRange) {

top = scrollRange;

moveDis = contentHeight2 - scrollTop;

}

content.scrollTop(scrollTop + moveDis);

scrollBox.css('top', top);

scrollProcess.css('height', scrollBox.outerHeight(true) + top);

e.preventDefault();

});

$(document).on('mouseup', function(){

$(document).off('mousemove');

$(document).off('mouseup');

});

});

});

三、Javascript代码实现

我们使用Javascript代码实现滚动条的功能，代码主要分为以下几个步骤：

1. 获取相关元素，如外层div，滑动条div，滑动条进度条div等。

2. 计算滑动条可滑动范围。

3. 计算滑动条进度条高度，滑动条进度条高度应与滑动范围成正比。

4. 处理滑动事件，使滑动条跟随内容滑动。

具体实现过程如下：

首先获取几个元素，如 div.content、.div-scroll、.div-scroll-box 和 .div-scroll-process 等。

通过以下代码获取元素：

var content = $('.content'),

scroll = $('.div-scroll'),

scrollBox = $('.div-scroll-box'),

scrollProcess = $('.div-scroll-process');

接下来，获取所需的相关数据，如内容的高度、内容距离窗口顶部高度、内容的可滑动范围、滑动条的可滑动范围等等。

计算滑动条可滑动范围的方法如下：

var contentHeight = content[0].scrollHeight,

contentTop = content.offset().top,

contentHeight2 = contentHeight - content.outerHeight(true),

scrollRange = scroll.outerHeight(true) - scrollBox.outerHeight(true);

scrollRange = scrollRange < 0 ? 0 : scrollRange;

通过下面的代码，我们可以计算滑动条进度条的高度，应该与滑动范围成正比。

scrollBox.height(scroll.outerHeight(true) / contentHeight * content.outerHeight(true));

最后，我们需要实现滑动事件，使滑动条跟随内容滑动。首先通过监听 content 的 scroll 事件，我们可以获取内容滑动的距离，然后根据滑动距离计算出滑动条进度条的高度和位置。

滑动条的进度条高度计算方法：

var t = content.scrollTop() / contentHeight2 * scrollRange;

scrollProcess.css('height', scrollBox.outerHeight(true) + t);

最后，我们需要定义滑动条的mousedown事件，捕获鼠标位置并实现滑动条的滑动。

完整的Javascript代码实现如下：

$(function(){

var content = $('.content'),

scroll = $('.div-scroll'),

scrollBox = $('.div-scroll-box'),

scrollProcess = $('.div-scroll-process');

var contentHeight = content[0].scrollHeight,

contentTop = content.offset().top,

contentHeight2 = contentHeight - content.outerHeight(true),

scrollRange = scroll.outerHeight(true) - scrollBox.outerHeight(true);

scrollRange = scrollRange < 0 ? 0 : scrollRange;

scrollBox.height(scroll.outerHeight(true) / contentHeight * content.outerHeight(true));

function move() {

var t = content.scrollTop() / contentHeight2 * scrollRange;

scrollProcess.css('height', scrollBox.outerHeight(true) + t);

}

move();

content.on('scroll', move);

scrollBox.on('mousedown', function(e){

var y = e.pageY,

top = parseInt(scrollBox.css('top'));

$(document).on('mousemove', function(e){

var scrollTop = content.scrollTop(),

dis = e.pageY - y,

moveDis = dis / scrollRange * contentHeight2;

top += dis;

if(top < 0) {

top = 0;

moveDis = -scrollTop;

}

if(top > scrollRange) {

top = scrollRange;

moveDis = contentHeight2 - scrollTop;

}

content.scrollTop(scrollTop + moveDis);

scrollBox.css('top', top);

scrollProcess.css('height', scrollBox.outerHeight(true) + top);

e.preventDefault();

});

$(document).on('mouseup', function(){

$(document).off('mousemove');

$(document).off('mouseup');

});

});

});

四、总结

通过上述步骤，我们可以实现一个美观且功能完善的自定义滑动条。拥有这种自定义滑动条样式的网页不但更具立体感，而且更加美观优雅，给浏览者带来更好的视觉体验。希望大家可以通过本文的介绍，自己尝试创建这样一个优秀的DIV滑动条，为网页添加魅力和特色。