整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線(xiàn)：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線(xiàn)：
現(xiàn)一個(gè)效果，就是網(wǎng)頁(yè)瀏覽器中的滾動(dòng)條滾動(dòng)的同時(shí)出現(xiàn)同步的滾動(dòng)進(jìn)度條！可以用在一些要描述頁(yè)面長(zhǎng)度的項(xiàng)目中，讓用戶(hù)更直觀(guān)的知道該網(wǎng)頁(yè)是不是快拉到底部了！
代碼展示
html+css：
js:
效果展示：
CSS table表格 thead固定 tbody滾動(dòng)效果
由于項(xiàng)目需要，在表格中，當(dāng)數(shù)據(jù)量越來(lái)越多時(shí)，就會(huì)出現(xiàn)滾動(dòng)條，而在滾動(dòng)的過(guò)程中，默認(rèn)情況下表格頭部會(huì)跟著表格內(nèi)容一起滾動(dòng)，導(dǎo)致看不到頭部對(duì)應(yīng)的字段名，影響體驗(yàn)效果！
實(shí)現(xiàn)思路：
將內(nèi)容要滾動(dòng)的區(qū)域控制在 tbody 標(biāo)簽中添加 overflow-y: auto; 樣式，給 tr 標(biāo)簽添加 table-layout:fixed; (這是核心)樣式，由于 tbody 有了滾動(dòng)條后，滾動(dòng)條也要占位，又會(huì)導(dǎo)致 tbody 和 thead 不對(duì)齊，所以在設(shè)置 tbody 的寬度時(shí)要把滾動(dòng)條的寬度也加上【如果不想顯示滾動(dòng)條的話(huà)，可以把滾動(dòng)條的寬度設(shè)置為0px，滾動(dòng)條就沒(méi)有了。
下面是效果圖，具體完整實(shí)例代碼也在下面：
<!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滾動(dòng)</title>
<style>
.table-box {
margin: 100px auto;
width: 1024px;
}
/* 滾動(dòng)條寬度 */
::-webkit-scrollbar {
width: 8px;
background-color: transparent;
}
/* 滾動(dòng)條顏色 */
::-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是滾動(dòng)條的寬度*/
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滾動(dòng)</caption>
<thead>
<tr>
<th>序 號(hào)</th>
<th>姓 名</th>
<th>年 齡</th>
<th>性 別</th>
<th>手 機(jī)</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>我自己是一名從事了多年開(kāi)發(fā)的web前端老程序員，目前辭職在做自己的web前端私人定制課程，今年年初我花了一個(gè)月整理了一份最適合2019年學(xué)習(xí)的web前端學(xué)習(xí)干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以關(guān)注我的頭條號(hào)并在后臺(tái)私信我：前端，即可免費(fèi)獲取。
原文鏈接：https://blog.csdn.net/muguli2008/article/details/103787152
avascript中制作滾動(dòng)代碼的常用屬性
1.網(wǎng)頁(yè)可見(jiàn)區(qū)域?qū)挘?document.body.clientWidth; 網(wǎng)頁(yè)可見(jiàn)區(qū)域高： document.body.clientHeight; 網(wǎng)頁(yè)可見(jiàn)區(qū)域?qū)挘?document.body.offsetWidth (包括邊線(xiàn)的寬); 網(wǎng)頁(yè)可見(jiàn)區(qū)域高： document.body.offsetHeight (包括邊線(xiàn)的寬); 網(wǎng)頁(yè)正文全文寬： document.body.scrollWidth; 網(wǎng)頁(yè)正文全文高： document.body.scrollHeight; 網(wǎng)頁(yè)被卷去的高： document.body.scrollTop; 網(wǎng)頁(yè)被卷去的左： document.body.scrollLeft; 網(wǎng)頁(yè)正文部分上： window.screenTop; 網(wǎng)頁(yè)正文部分左： window.screenLeft; 屏幕分辨率的高： window.screen.height; 屏幕分辨率的寬： window.screen.width; 屏幕可用工作區(qū)高度： window.screen.availHeight;
2.假設(shè) obj 為某個(gè) HTML 控件。
obj.offsetTop 指 obj 距離上方或上層控件的位置，整型，單位像素。 obj.offsetLeft 指 obj 距離左方或上層控件的位置，整型，單位像素。 obj.offsetWidth 指 obj 控件自身的寬度，整型，單位像素。 obj.offsetHeight 指 obj 控件自身的高度，整型，單位像素。
我們對(duì)前面提到的“上方或上層”與“左方或上層”控件作個(gè)說(shuō)明。 例如：
“提交”按鈕的 offsetTop 指“提交”按鈕距“tool”層上邊框的距離，因?yàn)榫嗥渖线呑罱氖?“tool” 層的上邊框。 “重置”按鈕的 offsetTop 指“重置”按鈕距“tool”層上邊框的距離，因?yàn)榫嗥渖线呑罱氖?“tool” 層的上邊框。 “提交”按鈕的 offsetLeft 指“提交”按鈕距“tool”層左邊框的距離，因?yàn)榫嗥渥筮呑罱氖?“tool” 層的左邊框。 “重置”按鈕的 offsetLeft 指“重置”按鈕距“提交”按鈕右邊框的距離，因?yàn)榫嗥渥筮呑罱氖恰疤峤弧卑粹o的右邊框。
以上屬性在 FireFox 中也有效。
3.offsetTop 與 style.top 的區(qū)別
預(yù)備知識(shí)：offsetTop、offsetLeft、offsetWidth、offsetHeight 我們知道 offsetTop 可以獲得 HTML 元素距離上方或外層元素的位置，style.top 也是可以的，二者的區(qū)別是：
(1)offsetTop 返回的是數(shù)字，而 style.top 返回的是字符串，除了數(shù)字外還帶有單位：px。 (2)offsetTop 只讀，而 style.top 可讀寫(xiě)。 (3)如果沒(méi)有給 HTML 元素指定過(guò) top 樣式，則 style.top 返回的是空字符串。
offsetLeft 與 style.left、offsetWidth 與 style.width、offsetHeight 與 style.height 也是同樣道理。 offsetWidth與style.width屬性的區(qū)別在于：如對(duì)象的寬度設(shè)定值為百分比寬度,則無(wú)論頁(yè)面變大還是變小,style.width都返回此百分比,而offsetWidth則返回在不同頁(yè)面中對(duì)象的寬度值而不是百分比值
4.scrollLeft : 對(duì)象的最左邊到對(duì)象在當(dāng)前窗口顯示的范圍內(nèi)的左邊的距離． 即是在出現(xiàn)了橫向滾動(dòng)條的情況下，滾動(dòng)條拉動(dòng)的距離． scrollTop 對(duì)象的最頂部到對(duì)象在當(dāng)前窗口顯示的范圍內(nèi)的頂邊的距離． 即是在出現(xiàn)了縱向滾動(dòng)條的情況下，滾動(dòng)條拉動(dòng)的距離．
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
