জাভাস্ক্রিপ্ট স্ক্রোলের জন্য উইন্ডো এক্স / ওয়াই অবস্থান পান

Question

আমি বর্তমানের দৃশ্যমান উইন্ডোটির অবস্থান (মোট পৃষ্ঠার প্রস্থ / উচ্চতার তুলনায়) পাওয়ার একটি উপায় সন্ধান করার প্রত্যাশা করছি যাতে আমি এটিকে একটি বিভাগ থেকে অন্য বিভাগে বাধ্য করার জন্য ব্যবহার করতে পারি। যাইহোক, যখন মনে করা হয় যে কোন বস্তুটি আপনার ব্রাউজারের জন্য সঠিক এক্স / ওয়াই ধরে রাখে তখন এটি অপরিসীম বিকল্প হতে পারে।

আইআই 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

টমাস - আপনি পুরোপুরি ঠিক বলেছেন। আমার খারাপ। মন্তব্যগুলি সরানো হয়েছে। আমি আপনার মন্তব্যটি পুনরায় পড়লাম এবং বুঝতে পেরেছি যে আপনার সমাধানটি কোনও জ্যাকুরি সমাধান নয়। দুঃক্ষিত। মোডড আপ।

— ব্যাংককিয়ান

এখন এটা কাজ করে. আমি মনে করি তাদের ওয়েবকিটে খুব অস্থায়ী বাগ ছিল এবং তারা এটি ইতিমধ্যে ঠিক করে দিয়েছে। আমি একটি প্লাগইন লিখেছিলাম সম্পূর্ণরূপে ভাঙা কারণ সেই বাগ এবং ব্যবহারকারীরা আমাকে এটি সম্পর্কে জানিয়েছিলেন। খুব ভয়ঙ্কর এই জাতীয় জিনিসগুলি ভেঙে যেতে পারে

— vsync

এটি $ (উইন্ডো) .স্ক্রোলটপ () এর কোড? ? এই উত্তরটিতে jQuery পদ্ধতিটি অন্তর্ভুক্ত করা সম্ভবত দরকারী।

— ফিল

আমি পোস্ট করা কোডটি কী হয়ে গেছে তার একটি প্যারাফ্রেসিং jQuery.fn.offset()। scrollTop()/ scrollLeft()মূলত একই কাজ, কিন্তু ক্লায়েন্টটপ / ক্লায়েন্টলফট বিয়োগ করবেন না।

— থোমাসরুটটার

পদ্ধতিটি কী?

— ম্যাক্সরুনার

Answer 2

আরও সহজ হতে পারে;

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

ক্রেডিট: so.dom.js # L492

Comments

নিখুঁতভাবে ক্রস ব্রাউজার নিরাপদ! সব থেকে ভালো সমাধান.

— সাইমন স্টেইনবার্গার

এটি উত্তর কোডের চেয়ে আরও ভাল কাজ করেছে, তবে ... উত্তর কোডটি কিছুটা নয়, কাজ করে না ...

— হাইড্রোপার

আমি ভাবছি কেন কেবল document.documentElement.scrollTopযেটি সর্বত্র ব্যবহার করে তা ব্যবহার করবেন না ।

— vsync

Answer 3

খাঁটি জাভাস্ক্রিপ্ট ব্যবহার করে আপনি উইন্ডো.স্ক্রোলএক্স এবং উইন্ডো.স্ক্রোলওয়াই ব্যবহার করতে পারেন

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

মন্তব্য

পেজএক্স অফসেট বৈশিষ্ট্যটি স্ক্রোলএক্স সম্পত্তিটির একটি উপাধি এবং পৃষ্ঠা ওয়াইফ্যাসেট সম্পত্তিটি স্ক্রোল ওয়াইয়ের সম্পত্তিটির একটি নাম:

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

আপনি যে পৃষ্ঠাটি লিঙ্ক করেছেন সেটি বলছে "ক্রস ব্রাউজারের সামঞ্জস্যের জন্য, উইন্ডো.স্ক্রোলের পরিবর্তে উইন্ডো.পৃষ্ঠাঅফসেট ব্যবহার করুন।"

— জেরেমিওয়েয়ার

এটি IE এর জন্য কাজ করে না। আইই এর মতো কিছু দরকারwindow.pageYOffset

— হিপকিস

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

}