为了账号安全,请及时绑定邮箱和手机立即绑定

JavaScript获取窗口X / Y位置以进行滚动

JavaScript获取窗口X / Y位置以进行滚动

ABOUTYOU 2019-08-09 17:38:03
JavaScript获取窗口X / Y位置以进行滚动我希望找到一种方法来获取当前可视窗口的位置(相对于总页面宽度/高度),这样我就可以使用它来强制从一个部分滚动到另一个部分。但是,当猜测哪个对象拥有您浏览器的真实X / Y时,似乎有大量选项。我需要确保IE 6 +,FF 2+和Chrome / Safari的哪些工作?window.innerWidth window.innerHeight window.pageXOffset window.pageYOffset document.documentElement.clientWidth document.documentElement.clientHeight document.documentElement.scrollLeft document.documentElement.scrollTop document.body.clientWidth document.body.clientHeight document.body.scrollLeft document.body.scrollTop还有其他人吗?一旦我知道窗口在哪里,我就可以设置一个慢慢调用的事件链,window.scrollBy(x,y);直到达到我想要的点。
查看完整描述

3 回答

?
慕标5832272

TA贡献1966条经验 获得超4个赞

也许更简单;

var top  = window.pageYOffset || document.documentElement.scrollTop,
    left = window.pageXOffset || document.documentElement.scrollLeft;

致谢:so.dom.js#L492


查看完整回答
反对 回复 2019-08-09
?
梵蒂冈之花

TA贡献1900条经验 获得超5个赞

使用纯JavaScript您可以使用Window.scrollXWindow.scrollY

window.addEventListener("scroll", function(event) {
    var top = this.scrollY,
        left =this.scrollX;}, false);

笔记

pageXOffset属性是scrollX属性的别名,pageYOffset属性是scrollY属性的别名:

window.pageXOffset == window.scrollX; // always true
window.pageYOffset == window.scrollY; // always true

这是一个快速演示

window.addEventListener("scroll", function(event) {
  
    var top = this.scrollY,
        left = this.scrollX;
  
    var horizontalScroll = document.querySelector(".horizontalScroll"),
        verticalScroll = document.querySelector(".verticalScroll");
    
    horizontalScroll.innerHTML = "Scroll X: " + left + "px";
      verticalScroll.innerHTML = "Scroll Y: " + top + "px";
  }, false);
*{box-sizing: border-box}:root{height: 200vh;width: 200vw}.wrapper{
    position: fixed;
    top:20px;
    left:0px;
    width:320px;
    background: black;
    color: green;
    height: 64px;}.wrapper div{
    display: inline;
    width: 50%;
    float: left;
    text-align: center;
    line-height: 64px}.horizontalScroll{color: orange}
<div class=wrapper>
    <div class=horizontalScroll>Scroll (x,y) to </div>
    <div class=verticalScroll>see me in action</div></div>


查看完整回答
反对 回复 2019-08-09
  • 3 回答
  • 0 关注
  • 753 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号