滚动
窗口的尺寸和滚动
窗口可视高度和宽度
document.documentElement对应的标签是html
document.documentElement.clientHeight()
document.documentElement.clientwidth()
alert( window.innerWidth ); // 整个窗口的宽度
alert( document.documentElement.clientWidth ); // 窗口减去滚动条的宽度
一般使用去除掉滚动条的document.documentElement.clientwidth()
兼容性更好的获取当前文档/页面水平方向已滚动的像素值，使用
console.log(window.pageXOffset)
console.log(window.pageYOffset)
如何将窗口按照我们想的偏移量滚动呢？
Window.scrollBy(x,y)
// 方法 scrollBy(x,y) 滚动页面至相对于现在位置的 (x, y) 位置。例如，scrollBy(0,10) 页面向下滚动 10px
滚动到窗口的某个坐标
window.scrollTo(pageX,pageY)
// 方法 scrollTo(pageX,pageY) 滚动页面至相对于文档的左上角的 (pageX, pageY) 位置
// 就好像设置 scrollLeft/scrollTop,回到顶部, 我们可以用 scrollTo(0,0)。
当前元素滚动到窗口的顶部或者底部
btn3.addEventListener('click',function() {
// 当前元素跳转到窗口顶部
this.scrollIntoView(top)
top = !top
})
btn4.addEventListener('click',function() {
// 当前元素跳转到窗口顶部
this.scrollIntoView(top)
top = !top
})
禁止滚动
overflow: hidden;
这个方法的缺点是会使滚动条消失。如果它占用了一些空间，它原本占用的空间就会空出来，使元素本身的内容“跳”出来填满空出来的空间里。
这看起来就有点怪怪的。但我们可以解决这个问题：通过对比冻结前后的clientWidth如果在 clientWidth 增加（滚动条消失）时，将 padding 添加到 document.body 取代滚动条来保持内容宽度不变
元素的滚动和尺寸
-
offsetleft和offsetTop与offsetParentoffsetParent是最近的祖先元素，这里的祖先元素是指以下几种情况:- CSS 定位（
position为absolute、relative或fixed）， - 或者
<td>、<th>、<table>， - 或者
<body>
如果第一个外层没有符合以上情况，不称为有效祖先元素，继续往上寻找
offsetTop和offsetLeft是相对于其第一个祖先元素的x/y坐标当自身属于以下情况的时候
offsetParent为null- 未显示的元素（
display:none或者不在文档中）。 <body>与<html>。position:fixed的元素。
- CSS 定位（
-
offsetWidth和offsetHeightoffsetWidth = 390— 外部宽度，计算方法是内部 css 宽度（300px）加上内填充（2 * 20px）和边框宽度（2 * 25px）。offsetHeight = 290— 外部高度。
-
clientLeft和clientTop元素的边框宽度和高度
-
clientHeight和clientWidth测算出可见区域的内边距和内容宽度（不会将滚动条计算在内），如果没有内边距内容区域就等于
clent...的值 -
scrollWidth和scrollHeight包括可见区域和滚动的隐藏的高度或者宽度实现点击展开全文的效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .wrap { position: relative; 300px; border: 1px solid red; } .content { height: 150px; 100%; overflow: hidden; } .expand { position: absolute; 100%; top: 152px; text-align: center; } .expand p { cursor: pointer; } </style> </head> <body> <div class="wrap"> <div class="content"> <p> 静夜思 床前明月光， 疑是地上霜。 举头望明月， 低头思故乡。 </p> <p> 国风·周南·关雎 先秦：佚名 关关雎鸠，在河之洲。窈窕淑女，君子好逑。 参差荇菜，左右流之。窈窕淑女，寤寐求之。 求之不得，寤寐思服。悠哉悠哉，辗转反侧。 参差荇菜，左右采之。窈窕淑女，琴瑟友之。 参差荇菜，左右芼之。窈窕淑女，钟鼓乐之。 </p> <p> 上元夜六首·其一 唐代：崔液 玉漏银壶且莫催，铁关金锁彻明开。 谁家见月能闲坐？何处闻灯不看来？ </p> </div> <div class="expand"> <p>点击展开全文</p> </div> </div> </body> <script> var $ = function (elem) { return document.querySelector(elem) } var content = $('.content') var expand = $('.expand') expand.addEventListener('click',function () { console.log(content.scrollHeight) content.style.height = `${content.scrollHeight}px` expand.style.display = 'none' }) </script> </html> -
scrollLeft和scrollTop元素隐藏部分的高度和宽度，滚了多少宽度和高度，它是可以直接被修改的
修改元素的这两个属性可以使得浏览器滚动元素
scrollTop设置为0 和Infinity使得元素分别滚动到顶部和底部