導航:首頁 > 編程語言 > 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控制滾動條到最底部相關的資料

熱點內容
網路中常用的傳輸介質 瀏覽：518
文件如何使用 瀏覽：322
同步推密碼找回 瀏覽：865
樂高怎麼才能用電腦編程序 瀏覽：65
本機qq文件為什麼找不到 瀏覽：264
安卓qq空間免升級 瀏覽：490
linux如何刪除模塊驅動程序 瀏覽：193
at89c51c程序 瀏覽：329
怎麼創建word大綱文件 瀏覽：622
裊裊朗誦文件生成器 瀏覽：626
1054件文件是多少gb 瀏覽：371
高州禁養區內能養豬多少頭的文件 瀏覽：927
win8ico文件 瀏覽：949
仁和數控怎麼編程 瀏覽：381
項目文件夾圖片 瀏覽：87
怎麼在東芝電視安裝app 瀏覽：954
plc顯示數字怎麼編程 瀏覽：439
如何辨別假網站 瀏覽：711
寬頻用別人的賬號密碼 瀏覽：556
新app如何佔有市場 瀏覽：42

友情鏈接