dom元素滚动条高度 js_js浏览器滚动条卷去的高度scrolltop(实例讲解)

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最经典的应用就是回到顶部，下面代码如下：

Title

*{

padding:0;

margin:0;

}

html,body{

width:100%;

height:1000%;

background:#11c900;

}

a{

text-decoration: none;

color:#000;

}

GO

//A标签本身是跳转页面的，把跳转的地址写在href这个属性中

/*

1)、不写值的话是刷新本页面

2)、写的如果是#target，是锚点定位，定位到当前页面Id为target这个位置

3)、“javascript:”这样写是取消A标签默认跳转的行为

*/

var goLink =document.getElementById("goLink");

/*

回到顶部：

总时间(duration):500ms

频率(interval)：多长时间走一步 10ms

总距离(target): 当前的位置(当前的scrollTop)- 目标的位置(0)

步长(step)：每一次走得距离 (target/duration)*interval

*/

/*

这个代码是可以优化的:

开始GO按钮是不显示的，当滚动到一定的距离之后，才显示，反之隐藏 只要浏览器的滚动条在滚动，我们就需要判断GO显示还是隐藏

浏览器的滚动条滚动:拖动滚动条、鼠标滚轮、键盘上下键、pageDown/pageUp键、点击滚动条的空白区域或者箭头(自主操作的行为)...我们还可以通过js控制scrollTop的值来实现滚动条的滚动

*/

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;

}

以上这篇js浏览器滚动条卷去的高度scrolltop(实例讲解)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

时间： -07-06