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

本文主要是介绍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, "*")});