scrollTop、scrollLeft、scrollWidth、scrollHeight

scroll系列的这几个属性都是和滚动有关的,上代码:

<!DOCTYPE html>
<html lang="ch"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"><title>scroll</title><style>.content {width: 350px;height: 300px;background-color: pink;padding: 10px;margin: 100px auto;overflow: scroll;}</style><script>window.addEventListener('load', function() {let contentDiv = document.querySelector('.content');contentDiv.addEventListener('scroll', function() {console.log('scrollTop:' + contentDiv.scrollTop);});});</script>
</head><body><div class="content">纳兰性德（1655年1月19日—1685年7月1日），叶赫那拉氏，字容若，号楞伽山人，满洲正黄旗人，清朝初年词人，原名纳兰成德，一度因避讳太子保成而改名纳兰性德。大学士明珠长子，其母为英亲王阿济格第五女爱新觉罗氏。 纳兰性德自幼饱读诗书，文武兼修，十七岁入国子监，被祭酒徐元文赏识。十八岁考中举人，次年成为贡士。康熙十二年（1673年）因病错过殿试。康熙十五年（1676年）补殿试，考中第二甲第七名，赐进士出身。纳兰性德曾拜徐乾学为师。他于两年中主持编纂了一部儒学汇编——《通志堂经解》，深受康熙皇帝赏识，为今后发展奠定基础。纳兰性德于康熙二十四年（1685年）五月三十日（1685年7月1日）溘然而逝，年仅三十岁（虚龄三十有一）。纳兰性德的词以“真”取胜，写景逼真传神，词风“清丽婉约，哀感顽艳，格高韵远，独具特色“。著有《通志堂集》、《侧帽集》、《饮水词》等。</div>
</body></html>

scrollTop是内容向下滚动的距离,同理scrollLeft是内容向右滚动的距离.再来打印一下scrollHeight:

window.addEventListener('load', function() {let contentDiv = document.querySelector('.content');console.log('scrollHeight:' + contentDiv.scrollHeight);
});

scrollHeight为438,但是这里文本内容的高度只占了418px:

所以这里的scrollHeight会把父盒子的padding内边距算进去,scrollWidth同理.

scrollTop、scrollLeft、scrollWidth、scrollHeight相关推荐

clientWidth、clientHeight、offsetWidth、offsetHeight以及scrollWidth、scrollHeight
clientWidth.clientHeight.offsetWidth.offsetHeight以及scrollWidth.scrollHeight是几个困惑了好久的元素属性,趁着有时间整理一下 1 ...
Flash Player小程序(内嵌窗口)在Chrome、Firefox、Edge、360极速/安全、IE 8、Oprea 36、QQ、搜狗等浏览器上的应用
Flash Player小程序(内嵌窗口):基于跨浏览器的小程序系统-PluginOK(牛插)中间件( https://github.com/wangzuohuai/WebRunLocal )开发,底 ...
一篇弄懂 scrollWidth、scrollHeight、scrollLeft和scrollTop的区别！（2）
快速理解scroll之间的区别简介完整代码 1.初始页面: 2.第一次纵向滚动: 3.第一次横向滚动条 4.总结简介 1.scrollHeight/scrollWidth 属性是一个只读属性 ...
JS 中 scrollWidth、scrollHeight、scrollLeft 、scrollTop 详解
1. 总述在JS 中scrollWidth.scrollHeight.scrollLeft .scrollTop 属性在做一些复杂的交互效果中是非常常用的,因此在本博文中详细的介绍并给出实例. 以上 ...
蒙了吗？offsetLeft、offsetWidth、scrollTop、scrollWidth、event.pageX
1.offsetHeight || offsetWidth = boder + padding + content 两者都是只读属性,如果想 offsetLeft offsetTop 一般是相对于 ...
四种浏览器对 clientHeight、offsetHeight、scrollHeight、clientWidth、offsetWidth 和 scrollWidth 的解释差异...
转自http://blog.163.com/chudaozhe@126/blog/static/1157323432011626112137928/ 网页可见区域宽:document.body.cli ...
jquery获取设置元素宽高位置height()、width()、offset()、position()、scrollTop()、scrollLeft()
全栈工程师开发手册 (作者:栾鹏) jquery系列教程2-style样式操作全解 jquery获取设置元素宽高位置 jquery的通过height().width().offset().positi ...
web实现置顶、置底功能、聊天页面、锚点、滚动条、vue、scrollTop、scrollIntoView、scrollHeight
目录前言 1.代码实现 3.scrollTop实现置顶置底(方式一) 4.scrollIntoView实现置顶置底(方式二) 5.总结前言在项目中遇到聊天功能,功能涉及置顶和置底知识,由此记录一 ...
js中clientWidth、scrollLeft、offsetX等宽高度和位置的用法
文章目录前言一.clientWidth / clientHeight 二.clientLeft / clientTop 三.clientX / clientY 四.scrollWidth / sc ...
再谈 document.documentElement 与 document.body 的 scrollWidth、offsetWidth、clientWidth
(scrollHeight.offsetHeight.clientHeight 同样可按本文去理解.) 这是一个很复杂的问题,让我们想像一下: document.documentElement.scr ...

scrollTop、scrollLeft、scrollWidth、scrollHeight

scrollTop、scrollLeft、scrollWidth、scrollHeight相关推荐

最新文章

热门文章