js滑动操作之-pageYOffset,scrollTop,offsetHeight,scrollHeight

读值

window.pageYOffset==window.scrollY

it returns the number of pixels the document is currently scrolled along the vertical axis

scrollElm.scrollTop

gets or sets the number of pixels that an element's content is scrolled vertically.

注意这里的scrollElm代表可滑动的元素,测试元素是否可以滑动可以用如下方法:

设置值

// Set the number of pixels scrolled.
scrollElm.scrollTop = intValue;

代码示例

<div id="container"><div id="scroller"><p>Far out in the uncharted backwaters of the unfashionable endof the western spiral arm of the Galaxy lies a small unregardedyellow sun. Orbiting this at a distance of roughly ninety-two millionmiles is an utterly insignificant little blue green planet whoseape-descended life forms are so amazingly primitive that they stillthink digital watches are a pretty neat idea.</p></div>
</div><div id="output">scrollTop: 0</div>

const scroller = document.querySelector("#scroller");
const output = document.querySelector("#output");scroller.addEventListener("scroll", event => {output.textContent = `scrollTop: ${scroller.scrollTop}`;
});

scroll事件的解释:

代码示例

    var pc = document.getElementById('page-container')pc.addEventListener('scroll', function(e) {window.parent.postMessage("scrollTop_zh:" + pc.scrollTop, "*")});

这是一个静态的元素高.

还有一个容易混的scrollHeight

document或iframe监听滑动失败的问题

https://blog.csdn.net/u010087338/article/details/121712846https://blog.csdn.net/u010087338/article/details/121712846

js滑动操作之-pageYOffset,scrollTop,offsetHeight,scrollHeight相关推荐

Js——ScrollTop、ScrollHeight、ClientHeight、OffsetHeight汇总
一直对ScrollTop.ScrollHeight.ClientHeight.OffsetHeight这些内容傻傻分不清楚,今天整体下. scrollHeight scrollHeight含有scro ...
top、postop、scrolltop、scrollHeight、offsetHeight
网页可见区域宽:document.body.clientWidth; 网页可见区域高:document.body.clientHeight; 网页可见区域高:document.body.o ...
clientHeight offsetHeight scrollHeight offsetTop scrollTop
文章目录各属性详解实现 offsetParent.offsetLeft/offsetTop深度剖析 element.offsetParent 定义祖先元素中不存在定位元素 webkit内核.Fi ...
html5 scrollheight,JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记...
全文参考:https://github.com/iuap-design/blog/issues/38 .MDN clientHeight,只读 clientHeight可以用公式 CSS height ...
html 滚动条 scrolltop scrollheight,浅谈JavaScript中scrollTop、scrollHeight、offsetTop、offsetHeight...
浅谈JavaScript中scrollTop.scrollHeight.offsetTop.offsetHeight 发布时间:2020-07-17 09:27:20 来源:亿速云阅读:223 作者 ...
html 滚动条 scrolltop scrollheight,JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记...
全文参考:https://github.com/iuap-design/blog/issues/38 .MDN clientHeight,只读 clientHeight可以用公式 CSS height ...
offsetTop,offsetHeight,scrollHeight,scrollTop的区别
offsetTop,offsetHeight,scrollHeight,scrollTop,这些属性曾经困扰了我很长很长很长时间. 今天花点功夫,彻底把他们搞清楚了. 假设 obj 为某个 HTML ...
滚动条三要素scrollTop clientHeight scrollHeight
插件 https://github.com/inuyaksa/jquery.nicescroll <!DOCTYPE html> <html><head><m ...
js实现操作等待提示loading……
js实现操作等待功能,防止重复提交,界面友好,底部为灰色遮罩层,防止用户重复操作. 先看效果图: 接着看js代码: 1 //关闭等待窗口 2 function closeWaiting() { 3 ...

js滑动操作之-pageYOffset,scrollTop,offsetHeight,scrollHeight

读值

设置值

js滑动操作之-pageYOffset,scrollTop,offsetHeight,scrollHeight相关推荐

最新文章

热门文章