最近在做一个聊天室的小案例，遇到了一个关于滚动条的问题，需要对获取的信息即时滚动以保证用户总能看到最新消息。聊天程序是基于 ajax 实现的，没有使用框架，消息容器是一个 div，查阅大量资料后写下这篇文章，以作记录！

文章目录

1. div 添加滚动条
2. 滚动条绑定事件
- （1. 基本属性及方法
- （2. 绑定滚动事件
- （3. 判断向上 & 向下滚动
- （4. 判断滚动条移动至最底部
3. 滚动条样式
- 样式 demo
4. 小案例

1. div 添加滚动条

  overflow:scroll;

只要要设置这么一行 css 语句，我们就为 div 标签添加了一个滚动条，但这是一个双向滚动条，也就是说会在 div标签的上下方向和左右方向都添加一个滚动条，一般我们只需要在一个方向添加滚动条即可，因此我们可以使用overflow-x 或者 overflow-y 来设置单方向滚动条！

2. 滚动条绑定事件

（1. 基本属性及方法

先介绍一些 js 中和 scroll 滚动相关的属性及方法，了解这些方法可以更方便的帮助我们理解下边的几个事件。

属性	解释
element.scrollHeight	返回元素整个滚动区域的高度
element.scrollWidth	返回元素整个滚动区域的宽度
element.scrollLeft	返回水平滚动条滚动的距离
element.scrollTop	返回垂直滚动条滚动的距离
element.clientHeight	返回元素的可见高度
element.clientWidth0	返回元素的可见宽度

方法	解释
scrollBy(x,y)	在滚动条原位置的基础上向右或者向下滚动的像素数
scrollTo(x,y)	将滚动条直接向右或者向下滚动的像素数

element.scrollTop = 0  `垂直滚动条在最顶端`element.scrollLeft = 0  `水平滚动条在最左端`element.scrollTop + element.clientHeight >= element.scrollHeight `垂直滚动条在最底端`element.scrollLeft + element.clientWidth >= element.scrollWidth `水平滚动条在最右端`

（2. 绑定滚动事件

div 可以直接使用 onscroll 属性来绑定滚动事件，如下所示，当我们在界面进行滚动时，控制台就会打印信息了！

<!-- div 使用 onscroll 来为滚动条绑定绑定事件 --><div style="width:200px;height:150px;overflow-y:scroll;" class="div_soroll" onscroll="scroll_move()"><br><br><br><br><br><br><br><br><br></div><script type="text/javascript">var i = 0;function scroll_move(){i += 1;console.log("滚动了"+i+"次")}</script>

（3. 判断向上 & 向下滚动

为 div 标签添加自定义属性 scrollTop 用来保存当前滚动条位置，在滚动事件中获取滚动之后的位置，判断两个位置的大小即可得出滚动条向上或者向下移动，最后将滚动之后的位置赋值给自定义属性 scrollTop。

<div style="width:200px;height:150px;border:1px solid;overflow-y:scroll;" class="div_soroll" onscroll="scroll_move(this)" scrollTop="0"><br><br><br><br><br><br><br><br><br></div><script type="text/javascript">function scroll_move(div){last_scrollTop = div.getAttribute("scrollTop");now_scrollTop = div.scrollTop;if (last_scrollTop<now_scrollTop){console.log("向下移动了");}else if(last_scrollTop>now_scrollTop){console.log("向上移动了");}div.setAttribute("scrollTop",now_scrollTop)}</script>

（4. 判断滚动条移动至最底部

通过上述 element.scrollTop + element.clientHeight >= element.scrollHeight 该公式即可判断！

3. 滚动条样式

在 css3 中，我们可以通过 ::-webkit-scrollbar 伪类选择器来设置滚动条的样式

::-webkit-scrollbar 仅仅在支持 WebKit 的浏览器生效 ( 例如, 谷歌Chrome, 苹果Safari )

样式 demo

详细内容请参考：

css scrollbar 样式设置
MDN web docs

4. 小案例

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>#the_div {border: 1px solid black;width: 200px;height: 100px;overflow-y: scroll;}#info{position:absolute;top: 90px;left: 8px;width: 200px;height: 20px;background-color: #ffc34c;color: white;text-align: center;line-height: 20px;font-size: 12px;opacity:0.8;visibility: hidden;}</style></head><body><div id="the_div" onscroll="scroll_move(this)" scrollTop="0"></div><div id="info" onclick="go_bottom()">∨ 有更多新的消息</div><script>var scroll_FLAG = truefunction scroll_move(div) {div_scrollTop = div.getAttribute("scrollTop");if (div.offsetHeight + div.scrollTop >= div.scrollHeight) {scroll_FLAG = true;document.getElementById("info").style.visibility = "hidden"return}else{scroll_FLAG = false;document.getElementById("info").style.visibility = "visible"}}function go_bottom() {var div = document.getElementById("the_div");div.scrollTo(0, div.scrollHeight);}function add_msg(){var div = document.getElementById("the_div");div.innerText += "123\n"if(scroll_FLAG){div.scrollTo(0,div.scrollHeight)}}setInterval(add_msg,1000)</script></body>
</html>

html 原生滚动条详解，看这一篇就够了！相关推荐

代理后台中间件_Golang Gin 实战（十三）| 中间件详解看这一篇就够了
6000字大章带你死磕Golang Gin中间件在Gin的整个实现中,中间件可谓是Gin的精髓.一个个中间件组成一条中间件链,对HTTP Request请求进行拦截处理,实现了代码的解耦和分离,并且 ...
Java socket详解,看这一篇就够了
刚给大家讲解Java socket通信后,好多童鞋私信我,有好多地方不理解,看不明白.特抽时间整理一下,详细讲述Java socket通信原理和实现案例.整个过程楼主都是通过先简单明了的示例让大家了解 ...
Symbol 进阶底层详解(看这一篇就够了)
Symbol() 是在 ES6 中提出来的一个新的基础类型,它主要用来定义一个唯一的属性值,防止重复命名,再对象中有着重要的作用,请耐心看完,最下边有 Symbol 进阶,对初学者来说不太友好,若想深 ...
strstr函数详解看这一篇就够了-C语言（函数讲解、函数实现、使用用法举例、作用、自己实现函数）
strstr()函数用于:查找子字符串目录函数介绍用法示例函数讲解实现函数事例展示函数介绍函数声明:char *strstr(const char *str1, const char ...
strtok函数详解看这一篇就够了-C语言（函数讲解、函数实现、使用用法举例、作用）
strtok()函数用于: 将字符串拆分为标记函数介绍函数声明:char * strtok ( char * str, const char * delimiters ); 头文件:#in ...
memmove函数详解看这一篇就够了-C语言（函数讲解、函数实现、使用用法举例、作用、自己实现函数）
memmove()函数用于:移动内存块函数介绍函数声明:void * memmove ( void * destination, const void * source, size_t num ) ...
strncpy函数详解看这一篇就够了-C语言（函数实现、使用用法举例、与strcpy的区别）
首先要明确strncpy的功能是:拷贝src字符串的前n个字符至dest 目录函数介绍与strcpy的区别函数实现: 用法示例: 结果展示: 函数介绍函数原型: char *strncpy(c ...
strcat函数详解看这一篇就够了-C语言（函数实现、使用用法举例、作用、与strncat的区别）
首先要明确strcat的功能是:将参数dest字符串和参数src字符串拼接起来目录函数介绍与strncat的区别函数实现: 用法示例: 结果展示: 函数介绍函数原型:char* strcat ...
memcpy函数详解看这一篇就够了-C语言（函数讲解、使用用法举例、作用）
memcpy()函数用于:复制内存块函数介绍函数声明:void * memcpy ( void * destination, const void * source, size_t num ); ...
strerror函数详解看这一篇就够了-C语言（函数讲解、使用用法举例、作用）
strerror()函数用于:获取指向错误消息字符串的指针函数介绍函数声明: char * strerror ( int errnum ); 头文件:#include <string ...

html 原生滚动条详解，看这一篇就够了！