导航:首页 > 编程语言 > 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

友情链接