स्क्रॉल के लिए जावास्क्रिप्ट को विंडो X / Y स्थिति मिलती है

Question

मैं वर्तमान देखने योग्य विंडो की स्थिति (कुल पृष्ठ चौड़ाई / ऊँचाई के सापेक्ष) प्राप्त करने के लिए एक रास्ता खोजने की उम्मीद कर रहा हूं, इसलिए मैं इसका उपयोग एक खंड से दूसरे में स्क्रॉल करने के लिए कर सकता हूं। हालाँकि, जब यह अनुमान लगाने लगता है कि कौन सी वस्तु आपके ब्राउज़र के लिए सही X / Y रखती है, तो जबरदस्त मात्रा में विकल्प हैं।

इनमें से मुझे आईई 6+, एफएफ 2+ और क्रोम / सफारी काम सुनिश्चित करने की आवश्यकता है?

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);जब तक कि यह मेरे वांछित बिंदु तक नहीं पहुंच जाता।

Answer 1

इसे खोजने के लिए 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केवल उन स्थितियों के लिए सही करने के लिए आवश्यक प्रतीत होता है जहां आपने मूल तत्व पर सीमा (न कि पैडिंग या मार्जिन, बल्कि वास्तविक सीमा) लागू की है, और उस पर, संभवतः केवल कुछ ब्राउज़रों में।

Comments

थॉमस - आप बिलकुल सही कह रहे हैं। मेरी गलती। टिप्पणियां हटा दी गईं। मैंने आपकी टिप्पणी को फिर से पढ़ा और महसूस किया कि आपका समाधान एक Jquery समाधान बिल्कुल नहीं था। क्षमा याचना। ऊपर मोडा हुआ।

— बैंकाकियन

यह अब काम करता है। मुझे लगता है कि उनके पास वेबकिट में एक बहुत ही अस्थायी बग था और उन्होंने इसे पहले से ही तय कर लिया था। मैंने उस बग की वजह से एक प्लग को पूरी तरह से तोड़ दिया और उपयोगकर्ताओं ने मुझे इसकी सूचना दी। बहुत डरावनी ऐसी बुनियादी चीजें टूट सकती हैं

— vsync

क्या यह $ (विंडो) .scrollTop () के लिए कोड है; ? संभवतः इस उत्तर में jQuery विधि को शामिल करना उपयोगी होगा।

— फिल

मैंने जो कोड पोस्ट किया है, वह इस बात का विरोधाभास है कि क्या बन गया jQuery.fn.offset()। scrollTop()/ scrollLeft()मूल रूप से एक ही है, लेकिन clientTop / clientLeft घटाना नहीं है।

— thomasrutter

विधि क्या है?

— मैक्सरनर

Answer 2

शायद अधिक सरल;

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

क्रेडिट: so.dom.js # L492

Comments

पूरी तरह से सुरक्षित ब्राउज़र पार! सबसे अच्छा उपाय।

— साइमन स्टाइनबर्गर

कि उत्तर कोड से बेहतर काम किया है, लेकिन ... उत्तर कोड काम नहीं किया है, नहीं थोड़ा ...

— 19

मुझे आश्चर्य है कि क्यों नहीं बस का उपयोग करें document.documentElement.scrollTopजो हर जगह काम करता है।

— vsync

Answer 3

शुद्ध जावास्क्रिप्ट का उपयोग करके आप Window.scrollX और Window.scrollY का उपयोग कर सकते हैं

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

टिप्पणियाँ

PageXOffset संपत्ति स्क्रॉलएक्स संपत्ति के लिए एक उपनाम है, और PageYOffset संपत्ति स्क्रॉल संपत्ति के लिए एक उपनाम है:

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>

Comments

आपके द्वारा लिंक किया गया पृष्ठ "क्रॉस-ब्राउज़र संगतता के लिए, window.pageYOffset के बजाय window.scrollY का उपयोग करें।"

— जेरेमी वियर

यह IE के लिए काम नहीं करता है। आईई की तरह कुछ की आवश्यकता हैwindow.pageYOffset

— hipkiss

Answer 4

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);

}