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

友情链接