整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
網(wǎng)頁的實際開發(fā)中，有時候需要給div標簽元素添加一個滾動條（比如水平的或者垂直的滾動條），我們該怎么寫css代碼呢？
給div設(shè)置滾動條需要分成兩步走：
1、設(shè)置div的高度以及寬度
如果不設(shè)置高度和寬度的話，內(nèi)容多也不會出現(xiàn)滾動條，因為沒有邊界能讓瀏覽器判斷內(nèi)容長度是否需要出現(xiàn)滾動條。
2、設(shè)置div的overflow屬性，你可以設(shè)置成auto（水平和垂直都有），也可以單獨設(shè)置overflow-x（水平滾動條），也可以單獨設(shè)置overflow-y（垂直滾動條）。
<div style="height:100px;width:300px;overflow:auto;background:#FFFFFF;">這里是迷糊筆記這里是迷糊筆記這里是迷糊筆記這里是迷糊筆記這里是迷糊筆記這里是迷糊筆記這里是迷糊筆記</div>
運行如下：
更多設(shè)置
只設(shè)置水平滾動條：
<div style="width:300px;overflow-x:auto"></div>
只設(shè)置垂直滾動條：
<div style="height:100px;overflow-y:auto"></div>
水平和垂直都設(shè)置：
<div style="width:300px;height:100px;overflow-x:auto;overflow-y:auto"></div>
文實例講述了jQuery實現(xiàn)將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">我是類容區(qū)域-1</div>
<div class="son-panel">我是類容區(qū)域-2</div>
<div class="son-panel">我是類容區(qū)域-3</div>
<div class="son-panel">我是類容區(qū)域-4</div>
<div class="son-panel" style="height:160px;">我是類容區(qū)域-5</div>
<div class="son-panel">我是類容區(qū)域-6</div>
<div class="son-panel">我是類容區(qū)域-7</div>
<div class="son-panel">我是類容區(qū)域-8</div>
</div>
三. 相關(guān)知識
javascript中制作滾動代碼的常用屬性
1.網(wǎng)頁可見區(qū)域?qū)挘?document.body.clientWidth;
網(wǎng)頁可見區(qū)域高： document.body.clientHeight;
網(wǎng)頁可見區(qū)域?qū)挘?document.body.offsetWidth (包括邊線的寬);
網(wǎng)頁可見區(qū)域高： document.body.offsetHeight (包括邊線的寬);
網(wǎng)頁正文全文寬： document.body.scrollWidth;
網(wǎng)頁正文全文高： document.body.scrollHeight;
網(wǎng)頁被卷去的高： document.body.scrollTop;
網(wǎng)頁被卷去的左： document.body.scrollLeft;
網(wǎng)頁正文部分上： window.screenTop;
網(wǎng)頁正文部分左： window.screenLeft;
屏幕分辨率的高： window.screen.height;
屏幕分辨率的寬： window.screen.width;
屏幕可用工作區(qū)高度： window.screen.availHeight;
2.假設(shè) 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 的區(qū)別
預(yù)備知識：offsetTop、offsetLeft、offsetWidth、offsetHeight
我們知道 offsetTop 可以獲得 HTML 元素距離上方或外層元素的位置，style.top 也是可以的，二者的區(qū)別是：
(1)offsetTop 返回的是數(shù)字，而 style.top 返回的是字符串，除了數(shù)字外還帶有單位：px。
(2)offsetTop 只讀，而 style.top 可讀寫。
(3)如果沒有給 HTML 元素指定過 top 樣式，則 style.top 返回的是空字符串。
offsetLeft 與 style.left、offsetWidth 與 style.width、offsetHeight 與 style.height 也是同樣道理。
offsetWidth與style.width屬性的區(qū)別在于：如對象的寬度設(shè)定值為百分比寬度,則無論頁面變大還是變小,style.width都返回此百分比,而offsetWidth則返回在不同頁面中對象的寬度值而不是百分比值
4.scrollLeft :
對象的最左邊到對象在當前窗口顯示的范圍內(nèi)的左邊的距離．
即是在出現(xiàn)了橫向滾動條的情況下，滾動條拉動的距離．
scrollTop
對象的最頂部到對象在當前窗口顯示的范圍內(nèi)的頂邊的距離．
即是在出現(xiàn)了縱向滾動條的情況下，滾動條拉動的距離．
avascript中制作滾動代碼的常用屬性
1.網(wǎng)頁可見區(qū)域?qū)挘?document.body.clientWidth; 網(wǎng)頁可見區(qū)域高： document.body.clientHeight; 網(wǎng)頁可見區(qū)域?qū)挘?document.body.offsetWidth (包括邊線的寬); 網(wǎng)頁可見區(qū)域高： document.body.offsetHeight (包括邊線的寬); 網(wǎng)頁正文全文寬： document.body.scrollWidth; 網(wǎng)頁正文全文高： document.body.scrollHeight; 網(wǎng)頁被卷去的高： document.body.scrollTop; 網(wǎng)頁被卷去的左： document.body.scrollLeft; 網(wǎng)頁正文部分上： window.screenTop; 網(wǎng)頁正文部分左： window.screenLeft; 屏幕分辨率的高： window.screen.height; 屏幕分辨率的寬： window.screen.width; 屏幕可用工作區(qū)高度： window.screen.availHeight;
2.假設(shè) 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 的區(qū)別
預(yù)備知識：offsetTop、offsetLeft、offsetWidth、offsetHeight 我們知道 offsetTop 可以獲得 HTML 元素距離上方或外層元素的位置，style.top 也是可以的，二者的區(qū)別是：
(1)offsetTop 返回的是數(shù)字，而 style.top 返回的是字符串，除了數(shù)字外還帶有單位：px。 (2)offsetTop 只讀，而 style.top 可讀寫。 (3)如果沒有給 HTML 元素指定過 top 樣式，則 style.top 返回的是空字符串。
offsetLeft 與 style.left、offsetWidth 與 style.width、offsetHeight 與 style.height 也是同樣道理。 offsetWidth與style.width屬性的區(qū)別在于：如對象的寬度設(shè)定值為百分比寬度,則無論頁面變大還是變小,style.width都返回此百分比,而offsetWidth則返回在不同頁面中對象的寬度值而不是百分比值
4.scrollLeft : 對象的最左邊到對象在當前窗口顯示的范圍內(nèi)的左邊的距離． 即是在出現(xiàn)了橫向滾動條的情況下，滾動條拉動的距離． scrollTop 對象的最頂部到對象在當前窗口顯示的范圍內(nèi)的頂邊的距離． 即是在出現(xiàn)了縱向滾動條的情況下，滾動條拉動的距離．
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
