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

读值

1)

window.pageYOffset==window.scrollY

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

2)

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 end
      of the western spiral arm of the Galaxy lies a small unregarded
      yellow sun. Orbiting this at a distance of roughly ninety-two million
      miles is an utterly insignificant little blue green planet whose
      ape-descended life forms are so amazingly primitive that they still
      think 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