網(wǎng)站打開速度很慢濟(jì)南疫情最新情況
最近在做一個聊天室的小案例，遇到了一個關(guān)于滾動條的問題，需要對獲取的信息即時滾動以保證用戶總能看到最新消息。聊天程序是基于 ajax 實現(xiàn)的，沒有使用框架，消息容器是一個 div，查閱大量資料后寫下這篇文章，以作記錄！
文章目錄
- 1. div 添加滾動條
- 2. 滾動條綁定事件
- （1. 基本屬性及方法
- （2. 綁定滾動事件
- （3. 判斷向上 & 向下滾動
- （4. 判斷滾動條移動至最底部
- 3. 滾動條樣式
- 樣式 demo
- 4. 小案例
1. div 添加滾動條
overflow:scroll;
只要要設(shè)置這么一行 css 語句，我們就為 div 標(biāo)簽添加了一個滾動條，但這是一個雙向滾動條，也就是說會在 div標(biāo)簽的上下方向和左右方向都添加一個滾動條，一般我們只需要在一個方向添加滾動條即可，因此我們可以使用overflow-x 或者 overflow-y 來設(shè)置單方向滾動條！
2. 滾動條綁定事件
（1. 基本屬性及方法
先介紹一些 js 中和 scroll 滾動相關(guān)的屬性及方法，了解這些方法可以更方便的幫助我們理解下邊的幾個事件。
| 屬性 | 解釋 |
|---|---|
| element.scrollHeight | 返回元素整個滾動區(qū)域的高度 |
| element.scrollWidth | 返回元素整個滾動區(qū)域的寬度 |
| element.scrollLeft | 返回水平滾動條滾動的距離 |
| element.scrollTop | 返回垂直滾動條滾動的距離 |
| element.clientHeight | 返回元素的可見高度 |
| element.clientWidth0 | 返回元素的可見寬度 |
| 方法 | 解釋 |
|---|---|
| scrollBy(x,y) | 在滾動條原位置的基礎(chǔ)上向右或者向下滾動的像素數(shù) |
| scrollTo(x,y) | 將滾動條直接向右或者向下滾動的像素數(shù) |
element.scrollTop = 0 `垂直滾動條在最頂端`element.scrollLeft = 0 `水平滾動條在最左端`element.scrollTop + element.clientHeight >= element.scrollHeight `垂直滾動條在最底端`element.scrollLeft + element.clientWidth >= element.scrollWidth `水平滾動條在最右端`
（2. 綁定滾動事件
div 可以直接使用 onscroll 屬性來綁定滾動事件，如下所示，當(dāng)我們在界面進(jìn)行滾動時，控制臺就會打印信息了！
<!-- 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 標(biāo)簽添加自定義屬性 scrollTop 用來保存當(dāng)前滾動條位置，在滾動事件中獲取滾動之后的位置，判斷兩個位置的大小即可得出滾動條 向上 或者 向下 移動，最后將滾動之后的位置賦值給 自定義屬性 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 偽類選擇器來設(shè)置滾動條的樣式
::-webkit-scrollbar 僅僅在支持 WebKit 的瀏覽器生效 ( 例如, 谷歌Chrome, 蘋果Safari )
樣式 demo
詳細(xì)內(nèi)容請參考：
- css scrollbar 樣式設(shè)置
- 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>