时间:2021-05-26
1、之前我们学习的JS盒子模型中:client系列/offset系列/scrollWidth/scrollHeight都是“只读”的属性-> 只能通过属性获取值,不能通过属性修改元素的样式
2、scrollTop/scrollLeft:滚动条卷去的高度/宽度(这两个属性是唯一“可读写”的属性)
box.scrollTop = 0 // 直接回到容器的顶部
我们的scrollTop的值是存在边界值(最大和最小值),我们设置的值比最小值小或者比最大值大都没用,起到效果的依然是边界的值
[最小值是零]
box.scrollTop = -1000;// 直接回到了容器的顶部,没有超出
console.log(box.scrollTop) //0
[最大值 = 真实的高度-当前容器一屏幕的高度]
var maxTop = box.scrollHeight - box.clientHeight;
scrollTop最经典的应用就是回到顶部,下面代码如下:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> *{ padding:0; margin:0; } html,body{ width:100%; height:1000%; background:#11c900; } a{ text-decoration: none; color:#000; } </style></head><body><a href="javascript:" rel="external nofollow" id="goLink">GO</a>//A标签本身是跳转页面的,把跳转的地址写在href这个属性中<script> var goLink =document.getElementById("goLink"); /* 回到顶部: 总时间(duration):500ms 频率(interval):多长时间走一步 10ms 总距离(target): 当前的位置(当前的scrollTop)- 目标的位置(0) 步长(step):每一次走得距离 (target/duration)*interval */ window.onscroll = function computedDisplay(){//不管怎么操作的,只要滚动条动了就会触发这个行为 var curTop = document.documentElement.scrollTop || document.body.scrollTop; var curHeight = document.documentElement.clientHeight || document.body.clientHeight; if(curTop>=clientHeight){ goLink.style.display = "block" }else{ goLink.style.display = "none" } } goLink.onclick = function(){ this.style.display = "none";//并不会消失,因为我们滚动条往回走的时候 又会触发onscroll事件,又会进行显示 window.onscroll = null; var duration = 500,interval=10,target=document.documentElement.scrollTop || document.body.scrollTop; var step = (target/duration)*interval; var timer = window.setInterval(function(){ var curTop = document.documentElement.scrollTop || document.body.scrollTop; if(curTop===0){ window.clearInterval(timer); window.onscroll = computedDisplay; //当动画结束后把对应的方法重新绑定给window.onscroll return; } curTop-=step document.documentElement.scrollTop = curTop; document.body.scrollTop = curTop; },interval) // document.documentElement.scrollTop = 0; // document.body.scrollTop = 0; }</script></body></html>以上这篇js浏览器滚动条卷去的高度scrolltop(实例讲解)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文实例讲述了jQuery实现浮动层随浏览器滚动条滚动的方法。分享给大家供大家参考。具体如下:这是jQuery实现的一个浮动层效果,随浏览器滚动条而滚动,并一直
问题描述在实现锚点定位的时候发现无法设置滚动条的位置。在Vue中,使用document.body.scrollTop=952无法设置滚动条的高度。documen
也不存在什么加载咯,就是一个判断滚动条是否到达浏览器底部了。如果到了就触发事件,米到就不处理。计算公式提简单的底部等于(0)=滚动条高度-滚动条顶部距离-可视高
判断滚动条到底部,需要用到DOM的三个属性值,即scrollTop、clientHeight、scrollHeight。scrollTop为滚动条在Y轴上的滚动
判断滚动条到底部,需要用到DOM的三个属性值,即scrollTop、clientHeight、scrollHeight。scrollTop为滚动条在Y轴上的滚动