實現網頁瀏覽器滾動條同步的滾動進度條

現一個效果，就是網頁瀏覽器中的滾動條滾動的同時出現同步的滾動進度條！可以用在一些要描述頁面長度的項目中，讓用戶更直觀的知道該網頁是不是快拉到底部了！

代碼展示

html+css：

js:

效果展示：

CSS table表格 thead固定 tbody滾動效果

由于項目需要，在表格中，當數據量越來越多時，就會出現滾動條，而在滾動的過程中，默認情況下表格頭部會跟著表格內容一起滾動，導致看不到頭部對應的字段名，影響體驗效果！

實現思路：

將內容要滾動的區域控制在 tbody 標簽中添加 overflow-y: auto; 樣式，給 tr 標簽添加 table-layout:fixed; (這是核心)樣式，由于 tbody 有了滾動條后，滾動條也要占位，又會導致 tbody 和 thead 不對齊，所以在設置 tbody 的寬度時要把滾動條的寬度也加上【如果不想顯示滾動條的話，可以把滾動條的寬度設置為0px，滾動條就沒有了。

下面是效果圖，具體完整實例代碼也在下面：

完整實例代碼：

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>純CSS table表格 thead固定 tbody滾動</title>
    <style>
        .table-box {
            margin: 100px auto;
            width: 1024px;
        }
 
        /* 滾動條寬度 */
        ::-webkit-scrollbar {
            width: 8px;
            background-color: transparent;
        }
 
        /* 滾動條顏色 */
        ::-webkit-scrollbar-thumb {
            background-color: #27314d;
        }
 
        table {
            width: 100%;
            border-spacing: 0px;
            border-collapse: collapse;
        }
 
        table caption{
            font-weight: bold;
            font-size: 24px;
            line-height: 50px;
        }
 
        table th, table td {
            height: 50px;
            text-align: center;
            border: 1px solid gray;
        }
 
        table thead {
            color: white;
            background-color: #38F;
        }
 
        table tbody {
            display: block;
            width: calc(100% + 8px); /*這里的8px是滾動條的寬度*/
            height: 300px;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
        }
 
        table tfoot {
            background-color: #71ea71;
        }
 
        table thead tr, table tbody tr, table tfoot tr {
            box-sizing: border-box;
            table-layout: fixed;
            display: table;
            width: 100%;
        }
 
        table tbody tr:nth-of-type(odd) {
            background: #EEE;
        }
 
        table tbody tr:nth-of-type(even) {
            background: #FFF;
        }
 
        table tbody tr td{
            border-bottom: none;
        }
 
    </style>
</head>
 
<body>
    <section class="table-box">
        <table cellpadding="0" cellspacing="0">
            <caption>純CSS table表格 thead固定 tbody滾動</caption>
            
            <thead>
                <tr>
                    <th>序 號</th>
                    <th>姓 名</th>
                    <th>年 齡</th>
                    <th>性 別</th>
                    <th>手 機</th>
                </tr>
            </thead>
 
            <tbody>
                <tr>
                    <td>001</td>
                    <td>Name</td>
                    <td>28</td>
                    <td>女</td>
                    <td>Mobile</td>
                </tr>
                <tr>
                    <td>002</td>
                    <td>Name</td>
                    <td>28</td>
                    <td>男</td>
                    <td>Mobile</td>
                </tr>
                <tr>
                    <td>003</td>
                    <td>Name</td>
                    <td>28</td>
                    <td>女</td>
                    <td>Mobile</td>
                </tr>
                <tr>
                    <td>004</td>
                    <td>Name</td>
                    <td>28</td>
                    <td>男</td>
                    <td>Mobile</td>
                </tr>
                <tr>
                    <td>005</td>
                    <td>Name</td>
                    <td>28</td>
                    <td>女</td>
                    <td>Mobile</td>
                </tr>
                <tr>
                    <td>006</td>
                    <td>Name</td>
                    <td>28</td>
                    <td>男</td>
                    <td>Mobile</td>
                </tr>
                <tr>
                    <td>007</td>
                    <td>Name</td>
                    <td>28</td>
                    <td>女</td>
                    <td>Mobile</td>
                </tr>
                <tr>
                    <td>008</td>
                    <td>Name</td>
                    <td>28</td>
                    <td>男</td>
                    <td>Mobile</td>
                </tr>
            </tbody>
 
            <tfoot>
                <tr>
                    <td colspan="5">【table，thead，tbody，tfoot】 colspan：合并行， rowspan：合并列 </td>
                </tr>
            </tfoot>
        </table>
    </section>
</body>
 
</html>

我自己是一名從事了多年開發的web前端老程序員，目前辭職在做自己的web前端私人定制課程，今年年初我花了一個月整理了一份最適合2019年學習的web前端學習干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以關注我的頭條號并在后臺私信我：前端，即可免費獲取。

原文鏈接：https://blog.csdn.net/muguli2008/article/details/103787152

avascript中制作滾動代碼的常用屬性

1.網頁可見區域寬： document.body.clientWidth; 網頁可見區域高： document.body.clientHeight; 網頁可見區域寬： document.body.offsetWidth (包括邊線的寬); 網頁可見區域高： document.body.offsetHeight (包括邊線的寬); 網頁正文全文寬： document.body.scrollWidth; 網頁正文全文高： document.body.scrollHeight; 網頁被卷去的高： document.body.scrollTop; 網頁被卷去的左： document.body.scrollLeft; 網頁正文部分上： window.screenTop; 網頁正文部分左： window.screenLeft; 屏幕分辨率的高： window.screen.height; 屏幕分辨率的寬： window.screen.width; 屏幕可用工作區高度： window.screen.availHeight;

2.假設 obj 為某個 HTML 控件。

obj.offsetTop 指 obj 距離上方或上層控件的位置，整型，單位像素。 obj.offsetLeft 指 obj 距離左方或上層控件的位置，整型，單位像素。 obj.offsetWidth 指 obj 控件自身的寬度，整型，單位像素。 obj.offsetHeight 指 obj 控件自身的高度，整型，單位像素。

我們對前面提到的“上方或上層”與“左方或上層”控件作個說明。例如：

“提交”按鈕的 offsetTop 指“提交”按鈕距“tool”層上邊框的距離，因為距其上邊最近的是 “tool” 層的上邊框。 “重置”按鈕的 offsetTop 指“重置”按鈕距“tool”層上邊框的距離，因為距其上邊最近的是 “tool” 層的上邊框。 “提交”按鈕的 offsetLeft 指“提交”按鈕距“tool”層左邊框的距離，因為距其左邊最近的是 “tool” 層的左邊框。 “重置”按鈕的 offsetLeft 指“重置”按鈕距“提交”按鈕右邊框的距離，因為距其左邊最近的是“提交”按鈕的右邊框。

以上屬性在 FireFox 中也有效。

3.offsetTop 與 style.top 的區別

預備知識：offsetTop、offsetLeft、offsetWidth、offsetHeight 我們知道 offsetTop 可以獲得 HTML 元素距離上方或外層元素的位置，style.top 也是可以的，二者的區別是：

(1)offsetTop 返回的是數字，而 style.top 返回的是字符串，除了數字外還帶有單位：px。 (2)offsetTop 只讀，而 style.top 可讀寫。 (3)如果沒有給 HTML 元素指定過 top 樣式，則 style.top 返回的是空字符串。

offsetLeft 與 style.left、offsetWidth 與 style.width、offsetHeight 與 style.height 也是同樣道理。 offsetWidth與style.width屬性的區別在于：如對象的寬度設定值為百分比寬度,則無論頁面變大還是變小,style.width都返回此百分比,而offsetWidth則返回在不同頁面中對象的寬度值而不是百分比值

4.scrollLeft : 對象的最左邊到對象在當前窗口顯示的范圍內的左邊的距離．即是在出現了橫向滾動條的情況下，滾動條拉動的距離． scrollTop 對象的最頂部到對象在當前窗口顯示的范圍內的頂邊的距離．即是在出現了縱向滾動條的情況下，滾動條拉動的距離．

在線咨詢

上一篇：使用Python進行網頁抓取的介紹
下一篇：界面控件DevExpress WinForm中文指南 - 使用HTML&CSS模板的條件樣式

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

實現網頁瀏覽器滾動條同步的滾動進度條

完整實例代碼：

您的項目需求