導航:首頁 > 編程語言 > js控制滾動條到最底部

js控制滾動條到最底部

 發布時間：2025-09-25 02:22:54

1. js控制div內的滾動條的位置

通過div的scrollTop變動控制垂直滾動條位置。

通過div的scrollLeft變動控制水平滾動條內位置。

示例容

<body>
//d1是外層div，帶滾動條
<divid='d1'style='height:200px;width:100px;overflow:auto;background:blue;'>
<divstyle='height:500px;width:500px;background:yellow'>2222</div>
</div>
</body>
<script>
document.getElementById('d1').scrollTop=100;//通過scrollTop設置滾動到100位置
document.getElementById('d1').scrollLeft=200;//通過scrollTop設置滾動到200位置
</script>

2. js window.scroll 怎麼判斷滾動到底部

若要想判斷js window.scroll是否滾動到底部，需要用的三個屬性值，它們分別是：

scrollTop、clientHeight和scrollHeight；

1、scrollTop為滾動條在Y軸上的滾動距離。

2、clientHeight為內容可視區域的高度。

3、scrollHeight為內容可視區域的高度加上溢出（滾動）的距離。

so，滾動條到底部的條件即為scrollTop + clientHeight == scrollHeight。

3. js控制當滾動條到最底部時隱藏某個div

您好！具體代碼如下，兼容各瀏覽器，其中scrollTop 為當前頁面到頂部的距離，document.body.offsetHeight為整個頁面的高度，document.documentElement.clientHeight為當前屏幕的高度，有不明白的可以問我，希望我的回答能幫到您！

<!DOCTYPEhtml>
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title></title>
<style>
body{margin:0;height:2000px;}
div{height:500px;width:500px;background:#f00;margin:0auto;}
</style>
<script>
window.onscroll=function(){
	varscrollTop=document.documentElement.scrollTop||document.body.scrollTop;
	if(scrollTop>=document.body.offsetHeight-document.documentElement.clientHeight)
	{
		document.getElementById("div1").style.display="none";	
		alert("去看看是不是DIV不見了");
	}
}
</script>
</head>
<body>
<divid="div1">
	thisisadiv
</div>
</body>
</html>

4. 一段js用來控制左側的導航欄滑到底部時固定右側繼續滑動，但問題是將頁面滾動到下邊刷新左邊不會滾下來了

依靠css 將頁面

document.documentElement.style.overflow='hidden';

document.body.style.overflow='hidden';//手機版設置這個。

如果設置了如上，頁面的滾動條將會專消失，此時滑鼠滾輪失效屬。

5. 如何用js或jquery控制滾動條到指定位置

請使用

fullPage.js插件。可以自行網路一下。

參考代碼：

<!DOCTYPEhtml>
<html>

<head>
<metacharset="UTF-8">
<styletype="text/css">
body{
color:#FFFFFF;
}

.section1{
background-color:#BFDA00;
}

.section2{
background-color:#2EBE21;
}

.section3{
background-color:#2C3E50;
}
</style>
<title></title>
<linkrel="stylesheet"href="css/jquery.fullPage.css"/>
<scripttype="text/javascript"src="../../js/jquery.js"></script>
<scripttype="text/javascript"src="js/jquery.fullPage.js"></script>
<script>
$(function(){
$("#ido").fullpage();
});
</script>
</head>

<body>

<divid="ido">
<divclass="sectionsection1">
<h1>每一個section是一屏，這是第一屏</h3>
</div>
<divclass="sectionsection2">
<h1>每一個section是一屏，這是第二屏</h3>
</div>
<divclass="sectionsection3active">
<h1>每一個section是一屏，這是第三屏</h3>
</div>
<divclass="sectionsection4">
<h1>每一個section是一屏，這是第四屏</h3>
</div>
</div>

</body>

</html>

css js 自己引用啊

閱讀全文

與js控制滾動條到最底部相關的資料

熱點內容
cmd批量移動文件命令 瀏覽：506
300英雄微信充值關閉 瀏覽：406
科魯茲導航如何編程 瀏覽：138
g9008v升級50感受 瀏覽：899
qq群馬甲群主管理分開 瀏覽：414
暗黑2升級亮金武器 瀏覽：417
hpux文件系統 瀏覽：798
企業網站模板大全 瀏覽：494
手機收到靈機數據驗證碼什麼情況 瀏覽：568
afinal框架教程 瀏覽：284
c伺服器開發pdf文件下載 瀏覽：938
外來文件如何管理 瀏覽：185
aspnetpdf下載文件 瀏覽：115
jsp讀取資料庫 瀏覽：663
emacs文件中搜索 瀏覽：468
二手手機在哪個網站買可靠 瀏覽：667
如何把文件框架變大 瀏覽：590
兩資料庫同步 瀏覽：348
怎麼做小型資料庫 瀏覽：350
數控g02圓弧怎麼編程 瀏覽：764

友情鏈接