整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
網頁的實際開發中，有時候需要給div標簽元素添加一個滾動條（比如水平的或者垂直的滾動條），我們該怎么寫css代碼呢？
給div設置滾動條需要分成兩步走：
1、設置div的高度以及寬度
如果不設置高度和寬度的話，內容多也不會出現滾動條，因為沒有邊界能讓瀏覽器判斷內容長度是否需要出現滾動條。
2、設置div的overflow屬性，你可以設置成auto（水平和垂直都有），也可以單獨設置overflow-x（水平滾動條），也可以單獨設置overflow-y（垂直滾動條）。
<div style="height:100px;width:300px;overflow:auto;background:#FFFFFF;">這里是迷糊筆記這里是迷糊筆記這里是迷糊筆記這里是迷糊筆記這里是迷糊筆記這里是迷糊筆記這里是迷糊筆記</div>
運行如下：
更多設置
只設置水平滾動條：
<div style="width:300px;overflow-x:auto"></div>
只設置垂直滾動條：
<div style="height:100px;overflow-y:auto"></div>
水平和垂直都設置：
<div style="width:300px;height:100px;overflow-x:auto;overflow-y:auto"></div>
文實例講述了jQuery實現將div中滾動條滾動到指定位置的方法。分享給大家供大家參考，具體如下：
一、Js代碼：
onload=function () {
//初始化
scrollToLocation();
};
function scrollToLocation() {
var mainContainer=$('#thisMainPanel'),
scrollToContainer=mainContainer.find('.son-panel:last');//滾動到<div id="thisMainPanel">中類名為son-panel的最后一個div處
//scrollToContainer=mainContainer.find('.son-panel:eq(5)');//滾動到<div id="thisMainPanel">中類名為son-panel的第六個處
//非動畫效果
//mainContainer.scrollTop(
// scrollToContainer.offset().top - mainContainer.offset().top + mainContainer.scrollTop()
//);
//動畫效果
mainContainer.animate({
scrollTop: scrollToContainer.offset().top - mainContainer.offset().top + mainContainer.scrollTop()
}, 2000);//2秒滑動到指定位置
}
二、Html代碼：
<div id="thisMainPanel" style="height:200px;overflow-y: scroll;border:1px solid #f3f3f3;">
<div class="son-panel">我是類容區域-1</div>
<div class="son-panel">我是類容區域-2</div>
<div class="son-panel">我是類容區域-3</div>
<div class="son-panel">我是類容區域-4</div>
<div class="son-panel" style="height:160px;">我是類容區域-5</div>
<div class="son-panel">我是類容區域-6</div>
<div class="son-panel">我是類容區域-7</div>
<div class="son-panel">我是類容區域-8</div>
</div>
三. 相關知識
javascript中制作滾動代碼的常用屬性
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 控件自身的高度，整型，單位像素。
我們對前面提到的“上方或上層”與“左方或上層”控件作個說明。
例如：
<div id=”tool”>
<input type=”button” value=”提交”>
<input type=”button” value=”重置”>
</div>
“提交”按鈕的 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
對象的最頂部到對象在當前窗口顯示的范圍內的頂邊的距離．
即是在出現了縱向滾動條的情況下，滾動條拉動的距離．
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 對象的最頂部到對象在當前窗口顯示的范圍內的頂邊的距離． 即是在出現了縱向滾動條的情況下，滾動條拉動的距離．
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
