滚动宽高
scrollHeight
scrollHeight表示元素的总高度，包括由于溢出而无法展示在网页的不可见部分
scrollWidth
scrollWidth表示元素的总宽度，包括由于溢出而无法展示在网页的不可见部分
[注意]IE7-浏览器返回值是不准确的
【1】没有滚动条时，scrollHeight与clientHeight属性结果相等，scrollWidth与clientWidth属性结果相等
<div id="test" ></div><script>//120 120console.log(test.scrollHeight,test.scrollWidth);//120 120console.log(test.clientHeight,test.clientWidth);</script>
【2】存在滚动条时，但元素设置宽高大于等于元素内容宽高时，scroll和client属性的结果相等
<div id="test" > 内容<br>内容<br></div><script>//103(120-17) 103(120-17)console.log(test.scrollHeight,test.scrollWidth);//103(120-17) 103(120-17)console.log(test.clientHeight,test.clientWidth);</script>
【3】存在滚动条，但元素设置宽高小于元素内容宽高，即存在内容溢出的情况时，scroll属性大于client属性
[注意]scrollHeight属性存在兼容性问题，chrome和safari浏览器中，scrollHeight包含padding-bottom；而IE和firefox不包含padding-bottom
<div id="test" > 内容</div><script>//chrome/safari:220(200+10+10)//firefox/IE:210(200+10)console.log(test.scrollHeight);//103(120-17)console.log(test.clientHeight);</script>
页面尺寸
document.documentElement.clientHeight表示页面的可视区域的尺寸，而document.documentElement.scrollHeight表示html元素内容的实际尺寸。但是由于各个浏览器表现不一样，分为以下几种情况
【1】html元素没有滚动条时，IE和firefox的client和scroll属性始终相同，且返回可视区的尺寸大小；而safari和chrome表现正常，clientHeight返回可视区域大小，而scrollHeight返回元素内容大小
//firefox: 755 755//chrome: 947 8(body元素的margin)//safari: 744 8(body元素的margin)//IE: 768 768console.log(document.documentElement.clientHeight,document.documentElement.scrollHeight)
【2】html元素存在滚动条时，各个浏览器都表现正常。clientHeight提供了视口区域的尺寸，而scrollHeight则提供了元素内容的尺寸
<body ><script>//firefox: 755 1016(1000+8*2)//chrome: 947 1016(1000+8*2)//safari: 744 1016(1000+8*2)//IE: 768 1016(1000+8*2)console.log(document.documentElement.clientHeight,document.documentElement.scrollHeight)</script>
兼容
因此要取得文档实际高度时，要取得元素的scrollHeight和clientHeight的最大值
var docHeight = Math.max(document.documentElement.scrollHeight,document.documentElement.clientHeight);var docWidth = Math.max(document.documentElement.scrollWidth,document.documentElement.clientWidth);
滚动长度
scrollTop
scrollTop属性表示被隐藏在内容区域上方的像素数。元素未滚动时，scrollTop的值为0，如果元素被垂直滚动了，scrollTop的值大于0，且表示元素上方不可见内容的像素宽度
scrollLeft
scrollLeft属性指示内容区域左侧隐藏的像素数量。元素未滚动时，scrollLeft的值为0，如果元素被水平滚动了，scrollLeft的值大于0，且表示元素左侧不可见内容的像素宽度
当滚动条滚动到内容底部时，符合以下等式
scrollHeight == scrollTop + clientHeight
<div id="test" >
内容</div><button id='btn1'>点击</button><div id="result"></div><script>btn1.onclick = function(){
result.innerHTML = 'scrollTop:' + test.scrollTop+';clientHeight:' + test.clientHeight + ';scrollHeight:' + test.scrollHeight
}</script>
与scrollHeight和scrollWidth属性不同的是，scrollLeft和scrollTop是可写的
[注意]为scrollLeft和scrollTop赋值为负值时，并不会报错，而是静默失败
<div id="test" >
内容</div><button id='btn1'>向下滚动</button><button id='btn2'>向上滚动</button><script>btn1.onclick = function(){test.scrollTop += 10;}
btn2.onclick = function(){test.scrollTop -= 10;}</script>
页面滚动
理论上，通过document.documentElement.scrollTop和scrollLeft可以反映和控制页面的滚动；但是chrome和safari浏览器是通过document.body.scrollTop和scrollLeft来控制的
<body ><button id='btn1' >点击</button><div id="result" ></div><script>btn1.onclick = function(){
result.innerHTML = 'html的scrollTop:' + document.documentElement.scrollTop +';body的scrollTop:' + document.body.scrollTop;
}</script> </body>
所以，页面的滚动高度兼容写法是
var docScrollTop = document.documentElement.scrollTop || document.body.scrollTop
回到顶部
可以利用scrollTop来实现回到顶部的功能
function scrollTop(){ if((document.body.scrollTop || document.documentElement.scrollTop) != 0){
document.body.scrollTop = document.documentElement.scrollTop = 0;
}
}
<body >
<button id='btn' >回到顶部</button>
<script>function scrollTop(){ if((document.body.scrollTop || document.documentElement.scrollTop) != 0){
document.body.scrollTop = document.documentElement.scrollTop = 0;
}
}
btn.onclick = scrollTop;</script>
</body>
还有两个window的只读属性可以获取整个页面滚动的像素值，它们是pageXOffset和pageYOffset
pageXOffset
pageXOffset表示水平方向上页面滚动的像素值
pageYOffset
pageYOffset表示垂直方向上页面滚动的像素值
[注意]IE8-浏览器不支持
<body ><button id='btn1' >点击</button><div id="result" ></div><script>btn1.onclick = function(){
result.innerHTML = 'pageYOffset:' + window.pageYOffset;
}</script> </body>
滚动方法
scrollTo(x,y)
scrollTo(x,y)方法滚动当前window中显示的文档，让文档中由坐标x和y指定的点位于显示区域的左上角
<body ><button id='btn' >滚动</button><script>btn.onclick = function(){scrollTo(0,0);}</script>
scrollBy(x,y)
scrollBy(x,y)方法滚动当前window中显示的文档，x和y指定滚动的相对量
<body ><button id='btn1' >向下滚动</button><button id='btn2' >向上滚动</button><script>btn1.onclick = function(){scrollBy(0,100);}
btn2.onclick = function(){scrollBy(0,-100);}</script>
【小应用】
利用scrollBy()加setInterval计时器实现简单的快速滚动功能
<body ><button id='btn1' >开始滚动</button><button id='btn2' >停止滚动</button><script>var timer = 0;
btn1.onclick = function(){
timer = setInterval(function(){
scrollBy(0,10);
},100)}
btn2.onclick = function(){
clearInterval(timer);
timer = 0;
}</script>
scrollIntoView()
Element.scrollIntoView方法滚动当前元素，进入浏览器的可见区域
该方法可以接受一个布尔值作为参数。如果为true，表示元素的顶部与当前区域的可见部分的顶部对齐（前提是当前区域可滚动）；如果为false，表示元素的底部与当前区域的可见部分的尾部对齐（前提是当前区域可滚动）。如果没有提供该参数，默认为true
<body ><div id="test" ></div><button id='btn1' >滚动到页面开头</button><button id='btn2' >滚动到页面结尾</button><script>btn1.onclick = function(){
test.scrollIntoView();
};
btn2.onclick = function(){
test.scrollIntoView(false);
}</script>
scrollIntoViewIfNeeded()
scrollIntoViewIfNeeded(true)方法只在当前元素在视口中不可见的情况下，才滚动浏览器窗口或容器元素，最终让它可见。如果当前元素在视口中可见，这个方法什么也不做
当alignCenter参数设置为true时，元素会尽可能地显示在视口的垂直中心位置上
[注意]该方法只有chrome和safari支持
<body ><div id="test" ></div><button id='btn' >滚动到页面中间</button><script>btn.onclick = function(){
test.scrollIntoViewIfNeeded(true)
};</script>
scrollByLines(lineCount)
scrollByLines(lineCount)方法将元素的内容滚动指定的行髙，lineCount值可以是正值， 也可以是负值
[注意]该方法只有safari支持
<div id="test" >
内容</div><button id='btn1'>向下滚动</button><button id='btn2'>向上滚动</button><script>btn1.onclick = function(){test.scrollByLines(1);}
btn2.onclick = function(){test.scrollByLines(-1);}</script>
scrollByPages(pageCount)
scrollByPages(pageCount)方法将元素的内容滚动指定的页面高度，具体高度由元素的高度决定
[注意]该方法只有safari支持
<div id="test" >
内容</div><button id='btn1'>向下滚动</button><button id='btn2'>向上滚动</button><script>btn1.onclick = function(){test.scrollByPages(1);}
btn2.onclick = function(){test.scrollByPages(-1);}</script>
滚动事件
在页面中相应元素发生变化时，scroll事件会在window对象上触发。当然，scroll事件也可以用在有滚动条的元素上
<body ><div id="result" ></div><script>window.onscroll = function(){
result.innerHTML = '页面的scrollTop:' + (document.documentElement.scrollTop||document.body.scrollTop);
}</script> </body>以上是滚动scroll如何理解的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
ZendStudio 13.5.1 Mac
功能强大的PHP集成开发环境
SublimeText3 英文版
推荐：为Win版本，支持代码提示！
DVWA
Damn Vulnerable Web App (DVWA) 是一个PHP/MySQL的Web应用程序，非常容易受到攻击。它的主要目标是成为安全专业人员在合法环境中测试自己的技能和工具的辅助工具，帮助Web开发人员更好地理解保护Web应用程序的过程，并帮助教师/学生在课堂环境中教授/学习Web应用程序安全。DVWA的目标是通过简单直接的界面练习一些最常见的Web漏洞，难度各不相同。请注意，该软件中
SublimeText3汉化版
中文版，非常好用
EditPlus 中文破解版
体积小，语法高亮，不支持代码提示功能
