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);จนกว่าจะถึงจุดที่ฉันต้องการ

วิธีการ jQuery (v1.10) ใช้เพื่อค้นหาสิ่งนี้คือ:

var doc = document.documentElement;
var left = (window.pageXOffset || doc.scrollLeft) - (doc.clientLeft || 0);
var top = (window.pageYOffset || doc.scrollTop)  - (doc.clientTop || 0);

นั่นคือ:

• มันจะทำการทดสอบwindow.pageXOffsetก่อนและใช้มันหากมีอยู่
• document.documentElement.scrollLeftมิฉะนั้นจะใช้
• จากนั้นจะลบdocument.documentElement.clientLeftหากมีอยู่

การลบdocument.documentElement.clientLeft/ Topเพียงดูเหมือนว่าจำเป็นต้องแก้ไขในสถานการณ์ที่คุณใช้เส้นขอบ (ไม่ใช่การขยายหรือขอบ แต่เป็นเส้นขอบที่แท้จริง) กับองค์ประกอบรากและที่อาจเป็นไปได้ในเบราว์เซอร์บางอย่างเท่านั้น

อาจจะง่ายขึ้น

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

เครดิต: so.dom.js # L492

ใช้จาวาสคริปต์ที่บริสุทธิ์คุณสามารถใช้Window.scrollXและWindow.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>

function FastScrollUp()
{
     window.scroll(0,0)
};

function FastScrollDown()
{
     $i = document.documentElement.scrollHeight ; 
     window.scroll(0,$i)
};
 var step = 20;
 var h,t;
 var y = 0;
function SmoothScrollUp()
{
     h = document.documentElement.scrollHeight;
     y += step;
     window.scrollBy(0, -step)
     if(y >= h )
       {clearTimeout(t); y = 0; return;}
     t = setTimeout(function(){SmoothScrollUp()},20);

};


function SmoothScrollDown()
{
     h = document.documentElement.scrollHeight;
     y += step;
     window.scrollBy(0, step)
     if(y >= h )
       {clearTimeout(t); y = 0; return;}
     t = setTimeout(function(){SmoothScrollDown()},20);

}