জাভাস্ক্রিপ্ট: ব্রাউজার উইন্ডোটি নীচে স্ক্রোল করা আছে কীভাবে সনাক্ত করবেন?

187

কোনও ব্যবহারকারীকে কোনও পৃষ্ঠার নীচে স্ক্রোল করা হয়েছে কিনা তা সনাক্ত করতে হবে। যদি তারা পৃষ্ঠার নীচে থাকে, যখন আমি নীচে নতুন সামগ্রী যুক্ত করব, আমি সেগুলি স্বয়ংক্রিয়ভাবে নতুন নীচে স্ক্রোল করব। যদি তারা নীচে না থাকে তবে তারা পৃষ্ঠায় আগের বিষয়বস্তু বেশি পড়ছেন, তাই আমি সেগুলিকে স্বয়ংক্রিয়ভাবে স্ক্রোল করতে চাই না কারণ তারা যেখানে রয়েছে সেখানে থাকতে চায়।

কোনও ব্যবহারকারী পৃষ্ঠার নীচে স্ক্রোল করা আছে বা তারা পৃষ্ঠায় উচ্চতর স্ক্রোল করেছে কিনা তা আমি কীভাবে সনাক্ত করতে পারি?

javascript 
— অ্যান্ড্রু
সূত্র
1
এই এক
— এঙ্গুলার

উত্তর:

267 
window.onscroll = function(ev) {
    if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
        // you're at the bottom of the page
    }
};

ডেমো দেখুন

— mVChr
সূত্র
29
এইচটিএমএল / শারীরিক উপাদানগুলি 100% তে সেট করা অবস্থায় কাজ করে না (যাতে শরীরটি পুরো ভিউপোর্টের উচ্চতা পূরণ করে)
— গ্রোড্রিগেজ
5
আই এর document.documentElement.scrollTopপরিবর্তে ব্যবহার করুন window.scrollY। IE এর সংস্করণগুলি কোনটি, যদি তা সমর্থন করে তবে তা নিশ্চিত নয় window.scrollY।
— বাটান্দোয়া
3
ক্রোমিয়াম সংস্করণে কাজ করে না 47.0.2526.73 উবুন্টু 14.04 এ নির্মিত, প্রাথমিক ওএস 0.3.2 (64-বিট)
— - এসও-তে বিষক্রিয়া বাড়ছে।
9
আমি অফসেটহাইটের পরিবর্তে ডকুমেন্ট.বডি.সক্রলহাইট ব্যবহার করেছি (আমার ক্ষেত্রে উইন্ডোজ ইনারহাইট হাইটের তুলনায় অফসেটহাইট সর্বদা ছোট ছিল)
— অলিভার
1
@ কার্লমরিসন আপনি কি আপনার ব্রাউজারের মাধ্যমে অনুগ্রহপ্রাপ্ত উত্তর (@ ডেকেল দ্বারা) ব্যবহার করতে পারেন?
— বসজ
114

সমস্ত বড় ব্রাউজার সমর্থনের জন্য আপডেট কোড (আই 10 এবং আই 11 অন্তর্ভুক্ত)

window.onscroll = function(ev) {
    if ((window.innerHeight + window.pageYOffset) >= document.body.offsetHeight) {
        alert("you're at the bottom of the page");
    }
};

বর্তমান গৃহীত উত্তর সঙ্গে সমস্যা হল window.scrollYআই ই পাওয়া যায় না।

স্ক্রোলওয়াই সম্পর্কিত এমডনির একটি উদ্ধৃতি এখানে :

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

এবং একটি কাজের স্নিপেট:

কোড স্নিপেট দেখান

ম্যাকের জন্য নোট

@ রাফালের মন্তব্যের ভিত্তিতে, একটি ছোট অফসেটের কারণে ম্যাকের সমস্যা ছিল।
নিম্নলিখিত আপডেট হওয়া শর্তটি কাজ করে:

(window.innerHeight + window.pageYOffset) >= document.body.offsetHeight - 2

আমার এটি পরীক্ষা করার আরও সুযোগ ছিল না, যদি কেউ এই নির্দিষ্ট সমস্যা সম্পর্কে মন্তব্য করতে পারে তবে দুর্দান্ত হবে।

— Dekel
সূত্র
এফএফ, ক্রোম, আইই 10, অ্যান্ড্রয়েডের জন্য ক্রোমে কাজ করার বিষয়টি নিশ্চিত করেছেন। ধন্যবাদ @ ডেকেল!
— বসজ
2
অদ্ভুতভাবে এটি শোনাতে পারে, কেবলমাত্র আমার ব্রাউজারে আমি 1 পিক্সের সংক্ষিপ্ত, এবং তাই শর্তটি ট্রিগার হয় না। নিশ্চিত না কেন, এটি কাজ করতে অতিরিক্ত কয়েকটি পিক্স যুক্ত করতে হয়েছিল।
— শারজিল আহমেদ
3
ম্যাক কম্পিউটারে, নীচের শর্তটি একটি ছোট অফসেটের কারণে পূরণ করা হয়নি (of 1px) আমরা শর্তটি এমনভাবে আপডেট করেছি(window.innerHeight + window.pageYOffset) >= document.body.offsetHeight - 2
— রাফাল
4
থেক্স @ ডেকেল! প্রকৃতপক্ষে, আমরা খুঁজে পাই যে উইন্ডো.পৃষ্ঠাঅফসেট ম্যাকের উপর একটি ভাসা। আমাদের চূড়ান্ত সমাধান (window.innerHeight + Math.ceil(window.pageYOffset + 1)) >= document.body.offsetHeight।
— রাফাল
2
শরীরের এমন স্টাইল রয়েছে যা উচ্চতা 100% এ সেট করে এমন ক্ষেত্রে কাজ করে না
— raRaRa
56

গৃহীত উত্তরটি আমার পক্ষে কার্যকর হয়নি। এটি করেছে:

window.onscroll = function(ev) {
    if ((window.innerHeight + window.scrollY) >= document.body.scrollHeight) {
      // you're at the bottom of the page
      console.log("Bottom of page");
    }
};

আপনি যদি পুরানো ব্রাউজারগুলিকে সমর্থন করতে চাইছেন (আই 9) অন্যরকম window.pageYOffsetআরও ভাল সমর্থন রয়েছে এমন এলিফ ব্যবহার করুন ।

— রায়ান নেল
সূত্র
1
IE10 / 11 এ কাজ করে না। আইই সাপোর্টের জন্য ডেকেলের উত্তর ( স্ট্যাকওভারফ্লো.com / জিজ্ঞাসা / 43৩৩৯/২৫/২ ) পরীক্ষা করুন । আমার জন্য কাজ করেছেন
— Herr_Schwabullek
অন্যান্য উত্তরগুলি কনসোল.লগ () প্রতিবার যখন আমি স্ক্রোল করেছি তখনই পৃষ্ঠার নীচে ছিল না তা নয়। এই উত্তরটি ক্রোমে আমার জন্য কাজ করেছিল।
— Defcronyke
আপনি যদি উইন্ডো.স্রোকওয়াল থেকে মুক্তি পান যা কোনভাবে বা কিনারে কাজ করে না, এটি একটি শালীন উত্তর। দিয়ে প্রতিস্থাপন করুন: (window.innerHeight + + window.pageYOffset)> = document.body.scrollHeight
— colemerrick
21

আমি একটি উত্তর খুঁজছিলাম কিন্তু সঠিক উত্তর পাই নি। এখানে একটি খাঁটি জাভাস্ক্রিপ্ট সমাধান যা সর্বশেষে ফায়ারফক্স, আইই এবং ক্রোমের সাথে এই উত্তরের সময় কাজ করে:

// document.body.scrollTop alone should do the job but that actually works only in case of Chrome.
// With IE and Firefox it also works sometimes (seemingly with very simple pages where you have
// only a <pre> or something like that) but I don't know when. This hack seems to work always.
var scrollTop = (document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop;

// Grodriguez's fix for scrollHeight:
// accounting for cases where html/body are set to height:100%
var scrollHeight = (document.documentElement && document.documentElement.scrollHeight) || document.body.scrollHeight;

// >= is needed because if the horizontal scrollbar is visible then window.innerHeight includes
// it and in that case the left side of the equation is somewhat greater.
var scrolledToBottom = (scrollTop + window.innerHeight) >= scrollHeight;

// As a bonus: how to scroll to the bottom programmatically by keeping the horizontal scrollpos:
// Since window.innerHeight includes the height of the horizontal scrollbar when it is visible
// the correct vertical scrollTop would be
// scrollHeight-window.innerHeight+sizeof(horizontal_scrollbar)
// Since we don't know the visibility/size of the horizontal scrollbar
// we scroll to scrollHeight that exceeds the value of the
// desired scrollTop but it seems to scroll to the bottom with all browsers
// without problems even when the horizontal scrollbar is visible.
var scrollLeft = (document.documentElement && document.documentElement.scrollLeft) || document.body.scrollLeft;
window.scrollTo(scrollLeft, scrollHeight);
— pasztorpisti
সূত্র
4
এটি প্রায় আমার জন্য কাজ করেছিল, তবে এইচটিএমএল / বডিটি উচ্চতায় নির্ধারিত ক্ষেত্রে ((document.documentElement && document.documentElement.scrollHeight) || document.body.scrollHeight)কেবল document.body.scrollHeightহিসাবের পরিবর্তে আমাকে ব্যবহার করতে হয়েছিল: 100%
— গ্রোড্রিগেজ
1
@ গ্রড্রিগেজ তথ্যের জন্য ধন্যবাদ! ভবিষ্যতে এটি আমাদের কাজে আসতে পারে! :-)
— pasztorpisti
14

এইটা কাজ করে

window.onscroll = function() {

    // @var int totalPageHeight
    var totalPageHeight = document.body.scrollHeight; 

    // @var int scrollPoint
    var scrollPoint = window.scrollY + window.innerHeight;

    // check if we hit the bottom of the page
    if(scrollPoint >= totalPageHeight)
    {
        console.log("at the bottom");
    }
}

আপনাকে সমর্থন করতে খুঁজছি থাকেন পুরোনো ব্রাউজারে (IE9) প্রতিস্থাপন window.scrollY সঙ্গে window.pageYOffset

— ইফফানেই আমাদি
সূত্র
1
2019 সালে প্রতিক্রিয়া সহ এই কাজ.এইচটিএমএল 100% উচ্চতার সাথে 100% উচ্চতার শরীরের সাথে কাজ করুন। ক্রোম, সাফারি, ফায়ারফক্স, প্রান্ত দিয়ে কাজ করুন।
— রাগান্বিত কিউই
কেবল একটি নোট: নামকরণ পরিবর্তন করা উচিত - ভেরিয়েবলগুলি পরিবর্তন করা উচিত। কারণ স্ক্রোলহাইট মোট পৃষ্ঠার উচ্চতা দেখায় এবং মোটহাইট বর্তমান স্ক্রোল পয়েন্টটি দেখায় তাই এটি কিছুটা বিভ্রান্তিকর।
— ভ্লাদিমির মার্টন
4

আমি সবেমাত্র এটি দেখতে শুরু করেছি এবং এখানে উত্তরগুলি আমাকে সহায়তা করেছে, তাই এর জন্য ধন্যবাদ। আমি কিছুটা প্রসারিত করেছি যাতে কোডটি আইই 7-তে ফিরে সমস্ত ভাবেই নিরাপদ থাকে:

আশা করি এটি কারও পক্ষে কার্যকর প্রমাণিত হয়েছে।

এখানে, একটি ফিডাল আছে;)

    <!DOCTYPE html>
<html>
<head>
    <style>
        div {
            height: 100px;
            border-bottom: 1px solid #ddd;
        }

        div:nth-child(even) {
            background: #CCC
        }

        div:nth-child(odd) {
            background: #FFF
        }

    </style>
</head>

<body>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</body>

<script type="text/javascript">
console.log("Doc Height = " + document.body.offsetHeight);
console.log("win Height = " + document.documentElement.clientHeight);
window.onscroll = function (ev) {
    var docHeight = document.body.offsetHeight;
    docHeight = docHeight == undefined ? window.document.documentElement.scrollHeight : docHeight;

    var winheight = window.innerHeight;
    winheight = winheight == undefined ? document.documentElement.clientHeight : winheight;

    var scrollpoint = window.scrollY;
    scrollpoint = scrollpoint == undefined ? window.document.documentElement.scrollTop : scrollpoint;

    if ((scrollpoint + winheight) >= docHeight) {
        alert("you're at the bottom");
    }
};
</script>
</html>
— ক্রেগ পুল
সূত্র
কাজ বাছাই। তবে এটি খুব সঠিক নয়। এটি বিবেচনা করে যে আপনি নীচের দিকে প্রায় 16px এর মধ্যে থাকা পর্যন্ত এটি নীচে স্ক্রোল করা আছে।
— পিটার হল
4

আপনি যদি height: 100%কিছু ধারক সেট করে থাকেন <div id="wrapper">তবে নিম্নলিখিত কোডগুলি (ক্রোমে পরীক্ষিত) কাজ করে:

var wrapper = document.getElementById('wrapper');

wrapper.onscroll = function (evt) {
  if (wrapper.scrollTop + window.innerHeight >= wrapper.scrollHeight) {
    console.log('reached bottom!');
  }
}
— জেরেমি বার্নিয়ার
সূত্র
3 
window.onscroll = function(ev) {
    if ((window.innerHeight + Math.ceil(window.pageYOffset)) >= document.body.offsetHeight) {
        alert("you're at the bottom of the page");
    }
};

এই উত্তরটি প্রান্তের কেসগুলি ঠিক করবে, কারণ এটি pageYOffset হয় doubleযখন innerHeightএবং offsetHeightহয় long, তাই যখন আপনি যে ব্রাউজারটি তথ্য প্রদান করে, আপনি একটি পিক্সেল সংক্ষিপ্ত করা যেতে পারে। উদাহরণস্বরূপ: আমাদের কাছে পৃষ্ঠার নীচে

সত্য window.innerHeight = 10.2

সত্য window.pageYOffset = 5.4

সত্য document.body.offsetHeight = 15.6

আমাদের গণনাটি তখন হয়: 10 + 5.4> = 16 যা মিথ্যা

এটি ঠিক করতে আমরা করতে পারি Math.ceil উপর pageYOffsetমান।

আশা করি এইটি কাজ করবে.

— ইয়া ইয়াহালম
সূত্র
2

আপনি jquery এর অসীম স্ক্রোলটি দেখতে পারেন:

http://www.infinite-scroll.com/infinite-scroll-jquery-plugin/

মনে হচ্ছে আপনি jquery লাইব্রেরি ব্যবহার করতে ইচ্ছুক এবং কোনও কঠোর খাঁটি জেএস পদ্ধতির প্রত্যাশা না করে আপনি যা যা চাইছেন তা এটির মতো শোনাচ্ছে।

— কাই চিং
সূত্র
2
যদিও এই লিঙ্কটি প্রশ্নের উত্তর দিতে পারে, উত্তরের প্রয়োজনীয় অংশগুলি এখানে অন্তর্ভুক্ত করা এবং রেফারেন্সের জন্য লিঙ্কটি সরবরাহ করা ভাল। লিঙ্কযুক্ত পৃষ্ঠাগুলি পরিবর্তিত হলে লিঙ্ক-শুধুমাত্র উত্তরগুলি অবৈধ হতে পারে।
— bobthedeveloper
@ হাটজোয়েম তিনি একটি প্লাগইনে লিঙ্ক করছেন। অনুলিপি করা উচিত "প্রয়োজনীয় অংশ" ঠিক কি? উত্তর "লিঙ্কযুক্ত পৃষ্ঠাটি পরিবর্তিত হলে অবৈধ হয়ে যায়" কে কে যত্নশীল? লিঙ্কটি যদি ভাঙা হয়ে যায়, এর অর্থ প্লাগইনটি বন্ধ ছিল এবং এর অস্তিত্ব নেই - আপনি উত্তরে আরও তথ্য যুক্ত করলেও এটি অবৈধ। জিজ, লিঙ্ক-কেবল উত্তরগুলি অগত্যা খারাপ নয়।
— ডাস্ট্রো
@ হাটজোয়েম এছাড়াও, মেটা থেকে : "যখন গ্রন্থাগারটি উল্লেখযোগ্য, স্থিতিশীল স্থানে থাকে তখন এই ধরণের উত্তর একটি সাধারণ দরিদ্র উত্তর তবে তবুও উত্তর : এটি" এটি ব্যবহার করুন "বলে বলে।"
— ডাস্ট্রো
এছাড়াও, যদি অনন্ত স্ক্রোলটি এই ইউআরএল পরিবর্তন করে তবে সম্ভবত গুগল উপস্থিত থাকবে। পয়েন্টটি হ'ল প্লাগইনটি ব্যবহার করা তাই লিঙ্কটি যদি মারা যায়, গুগল অনুসন্ধান করুন jquery অসীম স্ক্রোল। আপনি সম্ভবত যা প্রয়োজন তা পেয়ে যাবেন।
— কাই কিং
2

আশ্চর্যজনকভাবে সমাধানগুলির কোনওোটাই আমার পক্ষে কাজ করেনি। আমার মনে হয় এটি কারণ আমি cssবিভ্রান্ত হয়েছিলাম এবং bodyব্যবহার করার সময় সমস্ত সামগ্রীকে ঘিরে রাখিনি height: 100%(এখনও কেন জানি না)। তবে সমাধানের সন্ধানের সময় আমি ভালভাবে কিছু নিয়ে এসেছি ... মূলত একই, তবে এটি দেখার মতো হতে পারে - আমি প্রোগ্রামিংয়ে নতুন আছি তবে যদি এটি একই ধীর গতিতে কাজ করে তবে কম সমর্থিত বা এমন কিছু যে ...

window.onscroll = function(evt) {
  var check = (Element.getBoundingClientRect().bottom - window.innerHeight <= 0) ? true : false;
  if (check) { console.log("You're at the bottom!"); }
};
— Coldark
সূত্র
2 
$(document).ready(function(){
    $('.NameOfYourDiv').on('scroll',chk_scroll);
});

function chk_scroll(e)
{
    var elem = $(e.currentTarget);
    if (elem[0].scrollHeight - elem.scrollTop() == elem.outerHeight()) 
    {
        alert("scrolled to the bottom");
    }

}
— জিহান ঝাং
সূত্র
idk একটি ভিন্ন দৃষ্টিকোণ। তবে গৃহীত উত্তরটি আরও নিশ্চিত
— Zihan Zhang
2 
const handleScroll = () => {
    if (Math.round(window.scrollY + window.innerHeight) >= Math.round(document.body.scrollHeight)) {
        onScroll();
    }
};

এই কোডটি ফায়ারফক্স এবং আইআই তেও কাজ করেছিল।

— আরোকিয়া প্রভা
সূত্র
1

এম্বেড থাকা ফাংশনাল কোড স্নিপেট ব্যবহার defaultViewএবং documentElementসহ:

const { defaultView } = document;
const { documentElement } = document;
const handler = evt => requestAnimationFrame(() => {
  const hitBottom = (() => (defaultView.innerHeight + defaultView.pageYOffset) >= documentElement.offsetHeight)();
  hitBottom
    ? console.log('yep')
    : console.log('nope')
});
document.addEventListener('scroll', handler);
<pre style="height:110vh;background-color:fuchsia">scroll down</pre>
স্নিপেট প্রসারিত করুন

— জোশ হাবদাস
সূত্র
1

উইন্ডোটির উচ্চতা এবং স্ক্রোল শীর্ষের সম্মিলিত ফলাফল শরীরের চেয়ে বড় কিনা তা আপনি পরীক্ষা করতে পারেন

if (window.innerHeight + window.scrollY >= document.body.scrollHeight) {}

— ওসামা এছামাদি
সূত্র
0

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

নিম্নলিখিত কোড স্নিপেট পৃষ্ঠার নীচে স্ক্রোলিং নিয়ন্ত্রণ করে:

JavascriptExecutor js = (JavascriptExecutor) driver;
boolean found = false;
long currOffset = 0;
long oldOffset = 0;
do
{
    oldOffset = currOffset;
    // LOOP to seek the component using several xpath regexes removed
    js.executeScript("window.scrollBy(0, 100)");
    currOffset = (Long)js.executeScript("var offset = window.window.pageYOffset; return offset;");
} while (!found && (currOffset != oldOffset));

যাইহোক, এই কোড স্নিপেট কার্যকর করার আগে উইন্ডোটি সর্বাধিক করা হয়।

— hfontanez
সূত্র
0

গৃহীত উত্তরটি আমার পক্ষে কার্যকর হয়নি। এটি করেছে:

const element = document.createElement('div');
document.body.appendChild(element);
document.addEventListener('scroll', () => {
    const viewportHeight = window.innerHeight;
    const distance = element.getBoundingClientRect().top;
    if (Math.floor(distance) <= viewportHeight) {
        console.log('yep')
    } else {
        console.log('nope')
    }
})
— mqliutie
সূত্র
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.