아래 편집기는 js 브라우저 스크롤 막대의 높이 스크롤 상단에 대한 기사를 제공합니다(예제 설명). 편집자님이 꽤 좋다고 생각하셔서 지금 공유하고 모두에게 참고용으로 드리고자 합니다. 편집기를 따라 살펴보겠습니다
1. 이전에 배운 JSbox 모델에서: 클라이언트 시리즈/오프셋 시리즈/scrollWidth/scrollHeight는 모두 "읽기 전용" 속성입니다. 속성을 통해 요소의 스타일을 수정할 수 없습니다
2. scrollTop/scrollLeft: 스크롤 막대의 높이/너비(이 두 속성은 유일한 "읽기 및 쓰기 가능" 속성입니다)
box.scrollTop = 0 // 컨테이너 상단을 직접 반환
우리의 스크롤탑의 값은 경계값(최대값과 최소값)을 가지고 있습니다. 우리가 설정한 값이 최소값보다 작거나 최대값보다 크면 쓸모가 없습니다. 효과는 여전히 경계값입니다
[최소값은 0입니다]
box.scrollTop = -1000;//
console.log(box.scrollTop을 초과하지 않고 컨테이너 상단으로 직접 반환됩니다. ) //0
[최대값 = true 현재 컨테이너의 높이 - 화면의 높이]
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这个属性中 /* 1)、不写值的话是刷新本页面 2)、写的如果是#target,是锚点定位,定位到当前页面Id为target这个位置 3)、“javascript:”这样写是取消A标签默认跳转的行为 */ <script> 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; } </script> </body> </html>
위 내용은 js의 브라우저 스크롤 막대 높이에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!