当前位置:主页 > 网站建设 > CSS > 正文

详解如何用div实现自制滚动条

04-08 CSS

滚动条是浏览器中最常见的组件了。然而,滚动条的颜值总是不能令人满意,特别是嵌入在页面中的滚动条:

详解如何用div实现自制滚动条

漂亮的网页突然出现一根灰灰的滚动条真是太煞风景了。虽然浏览器也提供了一些伪类能改善滚动条的外观,但改善程度也是有限。为什么不自己用 div 实现一根萌萌的滚动条呢,比如这根:

详解如何用div实现自制滚动条

贪吃蛇滚动条

今天就来讲讲如何用 div 自己实现滚动条。

1. 先得有滚动条

在开始之前,我们要先隐藏浏览器本身的滚动条,加上自制的滚动条

lt;bodygt;
  lt;div id=quot;containerquot;gt;
    lt;div class=quot;scrollbarquot;gt;lt;/divgt;
    bla bla bla ... 一大段一屏显示不下的内容
  lt;/divgt;
lt;/bodygt;

我们在需要滚动条的 div 中增加了一个 class=quot;scrollquot; 的 div 代表滚动条,给这个 div 来点样式:

html, body, #container {
    height: 100%;
    margin: 0;
}
#container {
    padding: 2rem;
    box-sizing: border-box; // 为了设置padding时不增加元素本身高度,避免出现滚动条
    overflow-y: hidden; // 隐藏浏览器本身的滚动条
    position: relative;
    padding-right: 30px; // 给自制滚动条留点空间,不要其他内容重合了
}
.scrollbar {
    height: 166px;
    width: 20px;
    border-radius: 20px;
    background: #ccc;
    position: absolute; // 绝对定位,方便设置滚动条位置
    right: 0; // 设置滚动条在最右边
}

一个简易的滚动条就有了:

详解如何用div实现自制滚动条

虽然比浏览器默认的滚动条好不到哪儿去,不过你可以自由发挥,把GIF动图作为滚动条也是可以的。由于滚动条是 absolute 定位的,后面就通过 top 属性来控制滚动条的位置。

现在滚动条还是静态的,想要让他动起来,就要先了解下滚动条与文档滚动的关系。

2. 滚动条与文档滚动的关系

先看这张图

详解如何用div实现自制滚动条

蓝色框代表一个很长的文档,文档的高度可以通过 scrollHeight 属性获得。

屏幕一下子显示不了那么多内容,只能显示红色区域部分,红色区域就称为rdquo;视口ldquo;(Viewport),视口的高度可以通过 offsetHeight 属性获得。

页面刚加载时,视口的顶部和文档顶部是重合的,滚动条(绿色竖条)也在最顶部。当我们将滚动条下拉时,文档的内容在向上滚动,其实是视口在向下移动:

详解如何用div实现自制滚动条

视口向下移动后,与文档顶部就有了个偏移,这个偏移可以通过 scrollTop 获得。视口下移的同时,滚动条与顶部也有一段距离了,暂且用 h 表示。

视口里文档顶部的最大距离可以是多少?根据图可以看出是 scrollHeight - offsetHeight;类似地,滚动条最大可以滚动的距离是 offsetHeight - barHeight,其中 barHeight 是滚动条本身的高度。

看到这里你是否有些明白了,滚动条滚动的距离,与文档视口离开顶部的距离是成一定比例的。滚动条滑动多少距离,文档视口就按比例滑动多少距离。而这个比例值就等于:

ratio = (scrollHeight - offsetHeight) / (offsetHeight - barHeight)

假设文档总长 5000px,视口高度1080px,滚动条滑块高 40px,那么根据公式计算出比例值是 3.77。也就是说,滚动条每滚动 1px,视口就要下移 3.77px

利用这个比例值,我们就可以让滚动条和视口等比例地进行滑动了。

3. 通过JavaScript控制滚动条

在自制的滚动条中,滚动通过两种事件触发,我们需要自己处理事件:

  1. 鼠标滚轮滚动时,更新视口位置,同时按比例更新滚动条的位置
  2. 鼠标拖拽滚动条时,更新滚动条位置,同时按比例更新视口位置

3.1 鼠标滚轮事件

鼠标滚轮滚动时,会触发 mousewheel 事件,此时需要根据滚动增量(e.deltaY)更新视口位置,在根据新的视口位置推算出滚动条的位置。代码:

container.addEventListener('mousewheel', function(e) {
    this.scrollTop += e.deltaY;
    this.scrollbar.style.top = (this.scrollTop + this.scrollTop / this.ratio) + 'px';
});

可以看到,滚动条的 top 值就是当前视口的偏移(scrollTop)加上这个偏移的按比例缩小。

3.2 鼠标拖拽事件

文章来源: 本文由SEO优化博客-壹帆SEO站长Dglake收集编辑 ,转载请保留链接: http://www.s-e-m.cn/CSS/38622.html

博客主人Dglake
草根站长,潭州教育SEO研究中心学员、黄埔俱乐部纵生会员,目前从事网络营销工作,岗位为推广主管;这是新做的博客网站,主要是分享经验文章.
  • 2353文章总数
  • 5510访问次数
  • 建站天数
  • 热门文章