কোনও ব্যবহারকারী নীচে স্ক্রোল করেছে কিনা তা পরীক্ষা করুন

Question

আমি একটি পৃষ্ঠা তৈরির ব্যবস্থা তৈরি করছি (ফেসবুকের মতো ধরণের) যেখানে ব্যবহারকারী নীচে স্ক্রোল করে যখন সামগ্রীটি লোড হয়। আমি এটির সর্বোত্তম উপায়টি কল্পনা করি যখন ব্যবহারকারী পৃষ্ঠার নীচে থাকে এবং আরও পোস্ট লোড করার জন্য একটি এজাক্স ক্যোয়ারী চালান।

একমাত্র সমস্যা হ'ল আমি জানি না যে কীভাবে ব্যবহারকারী jQuery এর সাথে পৃষ্ঠার নীচে স্ক্রোল করেছেন কিনা check কোন ধারনা?

ব্যবহারকারী যখন jQuery এর সাথে পৃষ্ঠার নীচে স্ক্রোল করেছেন তখন আমাকে চেক করার একটি উপায় খুঁজে বের করতে হবে।

Comments

এটি মজার, আমি নীচে স্ক্রোল করার সময় কোন ফাংশনটি ডাকা হচ্ছে তা বের করার চেষ্টা করছি, তাই আমি এই উত্সাহী "বৈশিষ্ট্য" অবরুদ্ধ করতে পারি।

— এন্ডোলিথ

: একটি React.js সমাধান, এই লিঙ্কে যথাসাধ্য সাহায্যের জন্য stackoverflow.com/a/53158893/4265546

— raksheetbhat

Answer 1

.scroll()ইভেন্টটি এর windowমতো ব্যবহার করুন :

$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() == $(document).height()) {
       alert("bottom!");
   }
});

আপনি এটি এখানে পরীক্ষা করতে পারেন , এটি উইন্ডোটির শীর্ষস্থানীয় স্ক্রোল গ্রহণ করে, সুতরাং এটি কতটা নীচে স্ক্রোল করে, দৃশ্যমান উইন্ডোর উচ্চতা যুক্ত করে এবং এটি সামগ্রিক সামগ্রীর ( document) সামগ্রীর উচ্চতার সমান কিনা তা পরীক্ষা করে । আপনি যদি পরিবর্তে ব্যবহারকারীটি নীচের দিকে আছেন কিনা তা যদি দেখতে চান তবে এটি দেখতে এরকম কিছু লাগবে:

$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
       alert("near bottom!");
   }
});

আপনি এখানে এই সংস্করণটি পরীক্ষা করতে পারেন , 100নীচে থেকে যে কোনও পিক্সেলটি শুরু করতে চান তা ঠিক করুন।

Comments

যথারীতি আপনি আমার আগে সেখানে যান যাইহোক, ওপিতে, আপনার কাছে যদি পোষ্টার ধারক থাকে, তবে "উইন্ডো" এর পরিবর্তে এটির আইডি ব্যবহার করুন, আপনি সর্বশেষ .Hight () স্ক্রোলহাইটে পরিবর্তন করতে চান

— খ্রিস্টান

ফায়ারফক্স সতর্কতা কল করেছে ("নীচে!"); বহুবার (ক্রোম এবং সাফারি দিয়ে সূক্ষ্ম কাজ করে)

— মার্কো মাতারাজ্জি

এটি কৃপা বাগী, আপনি যদি console.log()সতর্কতার পরিবর্তে এটি করেন তবে এটি কখনও কখনও আদেশটি পুনরাবৃত্তি করে।

— জর্জেন পল

- @KevinVella ভেলিয়া ভাল সমন্বয় যতক্ষন পর্যন্ত ব্যবহারকারী স্ক্রলিং করা বন্ধ করে দিয়েছে এটা অগ্নিসংযোগ প্রতিরোধে আন্ডারস্কোর ইউটিলিটি মধ্যে _.debounce () সঙ্গে এই ব্যবহার করা underscorejs.org/#debounce -

— JohnnyFaldo

@ নিকক্রাভার কি কোনও খাঁটি জেএস বাস্তবায়ন উপলব্ধ?

— দেউসওয়ার্ল্ড

Answer 2

নিক ক্র্যাভারের উত্তরটি ভাল কাজ $(document).height()করে, ব্রাউজার অনুসারে এর মূল্য পরিবর্তিত হয় তা এড়িয়ে চলেন ।

এটি সমস্ত ব্রাউজারে কাজ করতে, জেমস প্যাডলসির এই ফাংশনটি ব্যবহার করুন :

function getDocHeight() {
    var D = document;
    return Math.max(
        D.body.scrollHeight, D.documentElement.scrollHeight,
        D.body.offsetHeight, D.documentElement.offsetHeight,
        D.body.clientHeight, D.documentElement.clientHeight
    );
}

এর জায়গায় $(document).height(), যাতে চূড়ান্ত কোডটি হয়:

$(window).scroll(function() {
       if($(window).scrollTop() + $(window).height() == getDocHeight()) {
           alert("bottom!");
       }
   });

Comments

তিনি সামান্য সংক্ষেপিত সংস্করণ ফাংশন getDocHeight () {var D = ডকুমেন্ট সহ আপডেট করেছেন; রিটার্ন ম্যাথ.ম্যাক্স (D.body.scrolHeight, D.docamentElement.scrollHight, D.body.offsetHeight, D.docamentElement.offsetHeight, D.body.clientHeight, D.docamentElement.clientHight); }

— ড্রয়

যখন আমি শীর্ষে পৌঁছেছি তখন আমাকে সতর্ক করে, নীচে (ক্রোম) না।

— ড্যামিয়েন রোচে

minপরিবর্তে ব্যবহার করা আরও ভাল হতে পারে max, বিশেষত যাইহোক প্রান্তিক কিছু না থাকলে, ঘটনাক্রমে ব্যবহারকারীকে পৃষ্ঠার নীচের অংশে যা ভাবেন তার দিকে স্ক্রোলিং থেকে আটকাতে হবে।

— সলোমন উকো

Answer 3

কেন এখনও এ পোস্ট করা হয়নি তা আমি ঠিক নিশ্চিত নই, তবে এমডিএন থেকে প্রাপ্ত ডকুমেন্টেশন অনুসারে , সরল উপায় জাভাস্ক্রিপ্টের বৈশিষ্ট্যগুলি ব্যবহার করে:

element.scrollHeight - element.scrollTop === element.clientHeight

আপনি যখন কোনও স্ক্রোলযোগ্য উপাদানটির নীচে থাকবেন তখন সত্য ফিরে আসে। তাই কেবল জাভাস্ক্রিপ্ট ব্যবহার করে:

element.addEventListener('scroll', function(event)
{
    var element = event.target;
    if (element.scrollHeight - element.scrollTop === element.clientHeight)
    {
        console.log('scrolled');
    }
});

scrollHeightব্রাউজারগুলিতে বিস্তৃত সমর্থন রয়েছে, অর্থাত্ 8 থেকে আরও সুনির্দিষ্ট হওয়ার জন্য, clientHeightএবং scrollTopউভয়ই প্রত্যেকের দ্বারা সমর্থিত। এমনকি 6.. এটি ক্রস ব্রাউজারটি নিরাপদ হওয়া উচিত।

Comments

মনে রাখবেন যে কিছু পরিস্থিতিতে এটি নাও হতে পারে। ফায়ারফক্স 47 একটি টেক্সারিয়া ক্লায়েন্টহাইটকে 239 হিসাবে প্রতিবেদন করে যখন উপরের সমীকরণটি নীচে স্ক্রোল করার সময় 253 দেয়। প্যাডিং / বর্ডার বা কোনও কিছু এটি প্রভাবিত করছে? যে কোনও উপায়ে, কিছু উইগল রুম যুক্ত করা যেমন ক্ষতি করবে না, পছন্দ করবে var isAtBottom = ( logField.scrollHeight - logField.scrollTop <= logField.clientHeight + 50 );। এটি কেবলমাত্র নীচে থাকলেই ক্ষেত্রটি স্বয়ংক্রিয়ভাবে স্ক্রোল করার জন্য কার্যকর (যাতে ব্যবহারকারী নিজের স্থান ইত্যাদি না হারাতে রিয়েলটাইম লগের নির্দিষ্ট অংশটি ম্যানুয়ালি পরীক্ষা করতে পারে)।

— বিউজর

আমি যুক্ত করব যে এটির পক্ষে মিথ্যা নেতিবাচক প্রত্যাবর্তন সম্ভব কারণ একপাশে একটি ছোট দশমিক ফিরে আসতে পারে অন্যদিকে পুরো সংখ্যাটি (যেমন 200.181819304947এবং 200) প্রদান করে। আমি এটি Math.floor()মোকাবেলায় সহায়তা করার জন্য একটি যুক্ত করেছি তবে আমি জানি না এটি কতটা নির্ভরযোগ্য হবে।

— হান্না

আমার জন্য, এটি ক্রস ব্রাউজারে কাজ করে না। আমি ফায়ার ফক্সের সাথে তুলনায় ক্রোমে সম্পূর্ণ ভিন্ন ফলাফল পেয়েছি।

— টেডেজ

আমি <body> উপাদানটিতে এটি চেষ্টা করেছিলাম, এবং যখন ব্রাউজারটি নীচে নয়, শীর্ষে স্ক্রোল করা হয় তখন এটি ফায়ারিং হয়।

— ক্রিস সোবোলিউস্কি

Math.abs(element.scrollHeight - element.scrollTop - element.clientHeight) <= 3.0(আপনার পরিস্থিতিতে উপযুক্ত পিক্সেল সহিষ্ণুতা সহ 3.0 প্রতিস্থাপন করুন)। এই পথে যাওয়ার কারণ এটি (এ) clientHeight, scrollTopএবং clientHeightসমস্ত বৃত্তাকার যা সমস্ত প্রান্তিককরণ যদি 3px ত্রুটির সম্ভাব্য কারণ হতে পারে, (বি) 3 পিক্সেল খুব কম ব্যবহারকারীর কাছে দৃশ্যমান তাই ব্যবহারকারী আপনার সাইটের সাথে কিছু ভুল বলে মনে করতে পারে যখন তারা "ভাবেন" যখন তারা পৃষ্ঠার নীচে রয়েছে যখন বাস্তবে তারা নেই, এবং (সি) নির্দিষ্ট ডিভাইসগুলি (বিশেষত মাউসবিহীন একটি) স্ক্রোল করার সময় অদ্ভুত আচরণ করতে পারে।

— জ্যাক গিফিন

Answer 4

নিকের সমাধানটি ব্যবহার করে এবং বারবার সতর্কতা / ইভেন্ট গুলি চালানো, আপনি সতর্কতার উদাহরণের উপরে কোডের একটি লাইন যুক্ত করতে পারেন:

$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
       $(window).unbind('scroll');
       alert("near bottom!");
   }
});

এর অর্থ হ'ল ডকুমেন্টের নীচে 100px এর মধ্যে আপনি প্রথমবারের মতো কোডটি ফায়ার করবে। আপনি ব্যাক আপ এবং তারপরে পিছনে ফিরে স্ক্রোল করলে এটি পুনরাবৃত্তি করবে না, যা আপনি নিক এর কোড ব্যবহার করছেন তার উপর নির্ভর করে দরকারী বা নাও হতে পারে।

Comments

আমি কেবল মন্তব্য করেছিলাম এবং বলেছিলাম যে কোডটির লাইনটি অন্য কারওর উত্তরের সাথে সম্পর্কিত তবে উদ্দেশ্যটির জন্য +1!

— নাট-উইলকিনস

দুঃখিত, আমি (এবং এখনও করতে পারি না) উত্তরে কীভাবে একটি মন্তব্য যুক্ত করতে পারি তা দেখতে (যেমন আমি এখানে করতে পারি) করতে পারি না?

— টিম ক্যার

হ্যাঁ নতুন ব্যবহারকারী পোস্টে একটি মন্তব্য যুক্ত করতে পারবেন না যদি আপনি আরও খ্যাতি পান।

— নাট-উইলকিনস

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

— 1934286

আমি কীভাবে পুরো উইন্ডোর পরিবর্তে নির্দিষ্ট ডিভি আইডি নির্বাচন করতে পারি?

— জেমস স্মিথ

Answer 5

নিক ক্র্যাভারের দুর্দান্ত গৃহীত উত্তরের পরেও আপনি স্ক্রোল ইভেন্টটি ছড়িয়ে দিতে পারেন যাতে ব্রাউজারের কর্মক্ষমতা এত ঘন ঘন বরখাস্ত না হয় :

var _throttleTimer = null;
var _throttleDelay = 100;
var $window = $(window);
var $document = $(document);

$document.ready(function () {

    $window
        .off('scroll', ScrollHandler)
        .on('scroll', ScrollHandler);

});

function ScrollHandler(e) {
    //throttle event:
    clearTimeout(_throttleTimer);
    _throttleTimer = setTimeout(function () {
        console.log('scroll');

        //do work
        if ($window.scrollTop() + $window.height() > $document.height() - 100) {
            alert("near bottom!");
        }

    }, _throttleDelay);
}

Comments

সম্ভবত এটি নির্দিষ্ট করা উচিত যে এর জন্য অ্যান্ডস্কোর.জেএস: আন্ডারস্কোরএসআরএস প্রয়োজন । যদিও এটি একটি খুব ভাল পয়েন্ট। পারফরম্যান্সের গুরুতর সমস্যাগুলি এড়াতে স্ক্রোল ইভেন্টটি প্রায়শই সবসময় থ্রোলেট হওয়া উচিত।

— জুড ওসবার

সম্ভবত এটি কেবল আমার এবং এটি কিছু বেঞ্চমার্কিং ব্যবহার করতে পারে তবে আমি প্রতিটি স্ক্রোল ইভেন্টে ক্লিয়ারটাইমআউট এবং সেটটাইমআউট প্রার্থনা করার ধারণা পছন্দ করি না। আমি 1 সেটটাইমআউট জারি করব এবং সেই হ্যান্ডলারে কিছু গার্ড যুক্ত করব। এটি সম্ভবত কেবলমাত্র একটি মাইক্রো-অপ্টিমাইজেশন (যদি তা হয়)।

— হতাশার গ্রিমেস

এটি সত্যিই ঝরঝরে সংযোজন! আমি আরও একটি উন্নতির কথা ভাবতে পারি। বর্তমানে যদি ব্যবহারকারীটি স্ক্রোল করা অবিরত করে তবে উচ্চতাটি যাচাই করবে না এমন ফাংশনটি পরীক্ষা করে। যদি এটি কোনও সমস্যা হয়ে থাকে (যেমন আপনি যখন ব্যবহারকারী স্ক্রলিং না করেই অর্ধেক ভাবে নীচে স্ক্রোল করেন তখন আপনি ফাংশনটি ট্রিগার করতে চান) আপনি সহজেই নিশ্চিত করতে পারেন যে নির্বাচিত ব্যবধানের সময় একাধিক কল নিষিদ্ধ করার সময়ও ফাংশনটি আসলে ডেকেছে। এটি দেখানোর জন্য এখানে একটি টুকরো কথা। gist.github.com/datacarl/7029558

— datacarl

কি? একটি সাধারণ গণনা রোধ করতে প্রচুর পরিমাণে যন্ত্রপাতি চালাবেন? আমি দেখতে পাচ্ছি না যে কীভাবে এটি আরও দক্ষ

— রামবাতিনো

Answer 6

আইওএস 6 সাফারি মোবাইলে কাজ করতে নিক ক্র্যাভারের উত্তরটি কিছুটা সংশোধন করা দরকার এবং তা হওয়া উচিত:

$(window).scroll(function() {
   if($(window).scrollTop() + window.innerHeight == $(document).height()) {
       alert("bottom!");
   }
});

পরিবর্তন করা হচ্ছে $ (উইন্ডো) .height () থেকে window.innerHeight কারণ যখন এড্রেস বারে লুকানো হয় একটি অতিরিক্ত 60px উইন্ডোর উচ্চতা যোগ করা কিন্তু ব্যবহার করছেন সম্পন্ন করতে হবে $(window).height()না না এই পরিবর্তন প্রতিফলিত ব্যবহার করার সময় window.innerHeightআছে।

দ্রষ্টব্য : window.innerHeightসম্পত্তিটিতে অনুভূমিক স্ক্রোলবারের উচ্চতা (এটি যদি রেন্ডার করা হয় )ও $(window).height()অন্তর্ভুক্ত থাকে , এর বিপরীতে যে অনুভূমিক স্ক্রোলবারের উচ্চতা অন্তর্ভুক্ত করবে না। এটি মোবাইল সাফারিতে কোনও সমস্যা নয়, তবে অন্যান্য ব্রাউজারগুলিতে বা মোবাইল সাফারির ভবিষ্যতের সংস্করণগুলিতে অপ্রত্যাশিত আচরণের কারণ হতে পারে। বেশিরভাগ সাধারণ ব্যবহারের ক্ষেত্রে এটির ==জন্য পরিবর্তন করা >=।

window.innerHeightসম্পত্তি সম্পর্কে এখানে আরও পড়ুন

Comments

window.innerHight যা আমি ধন্যবাদ অর্জনের চেষ্টা করেছিলাম তার জন্য আরও বোধগম্য হয়েছে!

— আমির 5000

স্ক্রোলের পরে কীভাবে অবশিষ্ট উচ্চতা পাবেন?

— ওপিভি

Answer 7

এখানে একটি মোটামুটি সহজ পদ্ধতির

const didScrollToBottom = elm.scrollTop + elm.clientHeight == elm.scrollHeight

উদাহরণ

elm.onscroll = function() {
    if(elm.scrollTop + elm.clientHeight == elm.scrollHeight) {
        // User has scrolled to the bottom of the element
    }
}

যেখানে elmএকটি উপাদান যেমন থেকে প্রাপ্ত document.getElementById।

Answer 8

এখানে কোডের একটি অংশ যা আপনাকে আপনার কোডটি ডিবাগ করতে সহায়তা করবে, আমি উপরের উত্তরগুলি পরীক্ষা করেছি এবং সেগুলি বগী হিসাবে পেয়েছি। আমি ক্রোম, আইই, ফায়ারফক্স, আইপ্যাড (সাফারি) এ অনুসরণগুলি পরীক্ষা করেছি। পরীক্ষার জন্য আমার আর কোনও ইনস্টল করা নেই ...

<script type="text/javascript">
   $(function() {
      $(window).scroll(function () {
         var docElement = $(document)[0].documentElement;
         var winElement = $(window)[0];

         if ((docElement.scrollHeight - winElement.innerHeight) == winElement.pageYOffset) {
            alert('bottom');
         }
      });
   });
</script>

একটি সহজ সমাধান হতে পারে, কিন্তু আমি যেখানে পয়েন্ট বন্ধ এটা কাজ করে

আপনার যদি এখনও কিছু দুর্বৃত্ত ব্রাউজার নিয়ে সমস্যা হয় তবে আপনাকে ডিবাগ করতে সহায়তা করার জন্য এখানে কিছু কোড রয়েছে:

<script type="text/javascript">
   $(function() {
      $(window).scroll(function () {
         var docElement = $(document)[0].documentElement;
         var details = "";
         details += '<b>Document</b><br />';
         details += 'clientHeight:' + docElement.clientHeight + '<br />';
         details += 'clientTop:' + docElement.clientTop + '<br />';
         details += 'offsetHeight:' + docElement.offsetHeight + '<br />';
         details += 'offsetParent:' + (docElement.offsetParent == null) + '<br />';
         details += 'scrollHeight:' + docElement.scrollHeight + '<br />';
         details += 'scrollTop:' + docElement.scrollTop + '<br />';

         var winElement = $(window)[0];
         details += '<b>Window</b><br />';
         details += 'innerHeight:' + winElement.innerHeight + '<br />';
         details += 'outerHeight:' + winElement.outerHeight + '<br />';
         details += 'pageYOffset:' + winElement.pageYOffset + '<br />';
         details += 'screenTop:' + winElement.screenTop + '<br />';
         details += 'screenY:' + winElement.screenY + '<br />';
         details += 'scrollY:' + winElement.scrollY + '<br />';

         details += '<b>End of page</b><br />';
         details += 'Test:' + (docElement.scrollHeight - winElement.innerHeight) + '=' + winElement.pageYOffset + '<br />';
         details += 'End of Page? ';
         if ((docElement.scrollHeight - winElement.innerHeight) == winElement.pageYOffset) {
             details += 'YES';
         } else {
             details += 'NO';
         }

         $('#test').html(details);
      });
   });
</script>
<div id="test" style="position: fixed; left:0; top: 0; z-index: 9999; background-color: #FFFFFF;">

আমি আশা করি এটি কারও কিছু সময় সাশ্রয় করবে।

Comments

ভ্যানিলা জেএসের জন্য সেরা উত্তর, কোনও জিকিউরি সমাধান নেই। ব্যবহারvar docElement = document.documentElement; var winElement = window

— jperelli

এটি 2019 এর পরিবর্তে winElement.pageYOffsetআপনি ব্যবহার করতে পারেন winElement.scrollY।

— নোয়েল আবরহামস

Answer 9

দয়া করে এই উত্তরটি পরীক্ষা করুন

 window.onscroll = function(ev) {
    if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
       console.log("bottom");
    }
};

আপনি footerHeight - document.body.offsetHeightপাদলেখের কাছে রয়েছেন বা পাদলেখ পৌঁছেছেন তা দেখতে আপনি করতে পারেন

Answer 10

var elemScrolPosition = elem.scrollHeight - elem.scrollTop - elem.clientHeight;

এটি উপাদানটির নীচে দূরত্বের স্ক্রোল বার গণনা করে। সমান 0, যদি স্ক্রোল বারটি নীচে পৌঁছে যায়।

Comments

আমি নিম্নলিখিতটি করেছি এবং নির্দ্বিধায় কাজ করেছি। ধন্যবাদ। var shouldScrol = (elem.scrolHeight - elem.scrolTop - elem.clientHeight) == 0;

— জিমিনসি

Answer 11

এটি আমার দুটি সেন্ট:

$('#container_element').scroll( function(){
        console.log($(this).scrollTop()+' + '+ $(this).height()+' = '+ ($(this).scrollTop() + $(this).height())   +' _ '+ $(this)[0].scrollHeight  );
        if($(this).scrollTop() + $(this).height() == $(this)[0].scrollHeight){
            console.log('bottom found');
        }
    });

Comments

আপনার সমাধানটি ব্যবহারের চেষ্টা করা হয়েছে, এটি দুর্দান্ত কাজ করে তবে যে ক্ষেত্রে এলিমেন্টের প্যাডিং থাকে - এটি কার্যকর হয় না কারণ এটি সমাধানের জন্য প্যাডিং ছাড়াই উপাদানটির খাঁটি উচ্চতা গণনা করে আমি এটিকে পরিবর্তন করেছি $(this).scrollTop() + $(this).height() == $(this)[0].scrollHeight=>$(this).scrollTop() + $(this).outerHeight(true) >= $(this)[0].scrollHeight

— তারাস চেরনাটা

Answer 12

ক্রস ব্রাউজার এবং ডিবাউনিং সহ খাঁটি জেএস (বেশ ভাল পারফরম্যান্স )

var CheckIfScrollBottom = debouncer(function() {
    if(getDocHeight() == getScrollXY()[1] + window.innerHeight) {
       console.log('Bottom!');
    }
},500);

document.addEventListener('scroll',CheckIfScrollBottom);

function debouncer(a,b,c){var d;return function(){var e=this,f=arguments,g=function(){d=null,c||a.apply(e,f)},h=c&&!d;clearTimeout(d),d=setTimeout(g,b),h&&a.apply(e,f)}}
function getScrollXY(){var a=0,b=0;return"number"==typeof window.pageYOffset?(b=window.pageYOffset,a=window.pageXOffset):document.body&&(document.body.scrollLeft||document.body.scrollTop)?(b=document.body.scrollTop,a=document.body.scrollLeft):document.documentElement&&(document.documentElement.scrollLeft||document.documentElement.scrollTop)&&(b=document.documentElement.scrollTop,a=document.documentElement.scrollLeft),[a,b]}
function getDocHeight(){var a=document;return Math.max(a.body.scrollHeight,a.documentElement.scrollHeight,a.body.offsetHeight,a.documentElement.offsetHeight,a.body.clientHeight,a.documentElement.clientHeight)}

ডেমো: http://jsbin.com/geherovena/edit?js , আউটপুট

দ্রষ্টব্য: Debouncer, getScrollXY, getDocHeightআমার দ্বারা লেখা

আমি কেবল এটির কাজটি প্রদর্শন করব এবং কীভাবে করব

Comments

পারফেক্ট। ফায়ারফক্স এবং ক্রোমে পরীক্ষিত

— এরিলিশার ভাস্কেজ

আমি নিম্নলিখিত ত্রুটিটি পেয়েছি: প্রত্যাশিত 3 টি আর্গুমেন্ট, তবে পেয়েছি 2. একটি আর্গুমেন্ট 'সি' সরবরাহ করা হয়নি।

— Sõber

Answer 13

সরল জেএসে আমার সমাধান:

let el=document.getElementById('el');
el.addEventListener('scroll', function(e) {
    if (this.scrollHeight - this.scrollTop - this.clientHeight<=0) {
        alert('Bottom');
    }
});

#el{
  width:400px;
  height:100px;
  overflow-y:scroll;
}

<div id="el">
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
</div>

Answer 14

নীচের প্রান্তে স্ক্রোল করা থাকলে ম্যাচের শর্তের জন্য এটি ব্যবহার করে দেখুন

if ($(this)[0].scrollHeight - $(this).scrollTop() == 
    $(this).outerHeight()) {

    //code for your custom logic

}

Answer 15

নিক তার সূক্ষ্ম জবাব দেয় তবে আপনার কাছে এমন ফাংশন থাকবে যা স্ক্রোল করার সময় নিজেকে পুনরাবৃত্তি করবে বা ব্যবহারকারীর উইন্ডোটি জুম করা থাকলে তা মোটেই কাজ করবে না। আমি একটি সহজ ফিক্স নিয়ে এসেছি ঠিক প্রথম গণিতে round

    if (Math.round($(window).scrollTop()) + $(window).innerHeight() == $(document).height()){
    loadPagination();
    $(".go-up").css("display","block").show("slow");
}

Answer 16

আপনি নিম্নলিখিত কোড চেষ্টা করতে পারেন,

$("#dashboard-scroll").scroll(function(){
    var ele = document.getElementById('dashboard-scroll');
    if(ele.scrollHeight - ele.scrollTop === ele.clientHeight){
       console.log('at the bottom of the scroll');
    }
});

Answer 17

স্ক্রোলযোগ্য উপাদানটি পরীক্ষা করার সময় এটি সঠিক ফলাফল দেয় (যেমন নয় window):

// `element` is a native JS HTMLElement
if ( element.scrollTop == (element.scrollHeight - element.offsetHeight) )
    // Element scrolled to bottom

offsetHeightএকটি উপাদান (প্যাডিং, মার্জিন এবং স্ক্রোলবারগুলি সহ ) এর আসল দৃশ্যমান উচ্চতা দেওয়া উচিত এবং এটি সম্পূর্ণscrollHeight অদৃশ্য (উপচে পড়া) অঞ্চলগুলি সহ কোনও উপাদানটির উচ্চতা।

jQueryএর .outerHeight()জাতীয় এর অনুরূপ ফলাফলের দিতে হবে .offsetHeightMDN ডকুমেন্টেশন জন্য - offsetHeightতার ক্রস ব্রাউজার সমর্থনের বিষয়ে স্পষ্ট নয়। আরও বিকল্প কভার করতে, এটি আরও সম্পূর্ণ:

var offsetHeight = ( container.offsetHeight ? container.offsetHeight : $(container).outerHeight() );
if  ( container.scrollTop == (container.scrollHeight - offsetHeight) ) {
   // scrolled to bottom
}

Comments

Math.floor(element.scrollTop) === element.scrollHeight - element.offsetHeightস্ক্রোলটপ যদি দশমিক হয় তবে এটি ছাড়া কাজ করবে না এর চেষ্টা করুনMath.floor()

— মিশেল মাইকেলাইলিস

Answer 18

এই সমস্ত সমাধানগুলি ফায়ারফক্স এবং ক্রোমে আমার পক্ষে কাজ করে না, তাই আমি মাইল ও'কিফের কাছ থেকে কাস্টম ফাংশন এবং মেডার ওমুরালিয়েভ এর মতো ব্যবহার করি :

function getDocHeight()
{
    var D = document;
    return Math.max(
        D.body.scrollHeight, D.documentElement.scrollHeight,
        D.body.offsetHeight, D.documentElement.offsetHeight,
        D.body.clientHeight, D.documentElement.clientHeight
    );
}

function getWindowSize()
{
  var myWidth = 0, myHeight = 0;
  if( typeof( window.innerWidth ) == 'number' ) {
    //Non-IE
    myWidth = window.innerWidth;
    myHeight = window.innerHeight;
  } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
    //IE 6+ in 'standards compliant mode'
    myWidth = document.documentElement.clientWidth;
    myHeight = document.documentElement.clientHeight;
  } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
    //IE 4 compatible
    myWidth = document.body.clientWidth;
    myHeight = document.body.clientHeight;
  }
  return [myWidth, myHeight];
}

$(window).scroll(function()
{
    if($(window).scrollTop() + getWindowSize()[1] == getDocHeight())
    {
        alert("bottom!");
    }
});

Answer 19

গৃহীত উত্তরটি আমার পক্ষে কার্যকর না হওয়ায় এটি আমার দুটি সেন্ট।

var documentAtBottom = (document.documentElement.scrollTop + window.innerHeight) >= document.documentElement.scrollHeight;

Answer 20

পরিবর্তে স্ক্রল ঘটনা শোনার ব্যবহারের অন্তর্ছেদ অবজারভার হয় সস্তা পরীক্ষণ যদি শেষ উপাদান ভিউপোর্ট (যে গড় ব্যবহারকারী নীচে স্ক্রল হয়েছিল) দৃশ্যমান ছিল জন্য। এটি পলিফিল দিয়ে আই 7 এর পক্ষেও সমর্থন করে ।

var observer = new IntersectionObserver(function(entries){
   if(entries[0].isIntersecting === true)
      console.log("Scrolled to the bottom");
   else
      console.log("Not on the bottom");
}, {
   root:document.querySelector('#scrollContainer'),
   threshold:1 // Trigger only when whole element was visible
});

observer.observe(document.querySelector('#scrollContainer').lastElementChild);

#scrollContainer{
  height: 100px;
  overflow: hidden scroll;
}

<div id="scrollContainer">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
  <div>Item 5</div>
  <div>Item 6</div>
  <div>Item 7</div>
  <div>Item 8</div>
  <div>Item 9</div>
  <div>Item 10</div>
</div>

Comments

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

— আলেক্স

@ আলেকস আপনি .observe(...)যখন কোনও ইভেন্ট শ্রোতার কাছে কল করতে পারেন যেমন ব্যবহারকারী যখন আপনার স্ক্রোল ধারকটিকে ঘুরিয়ে / স্পর্শ করছে তখন তা তাত্ক্ষণিকভাবে ট্রিগার হবে না।

— স্টেফানসআর্যা

Answer 21

আমাকে JQuery ছাড়াই অ্যাপ্রোচ দেখাতে দিন। সাধারণ জেএস ফাংশন:

function isVisible(elem) {
  var coords = elem.getBoundingClientRect();
  var topVisible = coords.top > 0 && coords.top < 0;
  var bottomVisible = coords.bottom < shift && coords.bottom > 0;
  return topVisible || bottomVisible;
}

এটি কীভাবে ব্যবহার করবেন তা সংক্ষিপ্ত উদাহরণ:

var img = document.getElementById("pic1");
    if (isVisible(img)) { img.style.opacity = "1.00";  }

Comments

এটি প্রশ্নের উত্তর দেয় না। প্রশ্নটি কীভাবে সনাক্ত করা গেল যে ব্যবহারকারীরা নীচে সমস্ত দিক থেকে উইন্ডোটি স্ক্রোল করেছে। আপনার কোডটি পরীক্ষা করছে যে কোনও নির্দিষ্ট উপাদানটি দেখছে কিনা।

— পিটার হল

Answer 22

আমি @ দদানোন উত্তরটি ব্যবহার করেছি এবং অ্যাজাক্স কল যুক্ত করেছি।

$('#mydiv').on('scroll', function(){
  function infiniScroll(this);
});

function infiniScroll(mydiv){
console.log($(mydiv).scrollTop()+' + '+ $(mydiv).height()+' = '+ ($(mydiv).scrollTop() + $(mydiv).height())   +' _ '+ $(mydiv)[0].scrollHeight  );

if($(mydiv).scrollTop() + $(mydiv).height() == $(mydiv)[0].scrollHeight){
    console.log('bottom found');
    if(!$.active){ //if there is no ajax call active ( last ajax call waiting for results ) do again my ajax call
        myAjaxCall();
    }
}

}

Answer 23

নিকের উত্তর সম্পর্কে বারবার সতর্কতা বন্ধ করতে

ScrollActivate();

function ScrollActivate() {
    $(window).on("scroll", function () {
        if ($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
            $(window).off("scroll");
            alert("near bottom!");
        }
    });
}

Answer 24

আপনি কল করলে গুগল ক্রোম পৃষ্ঠার পুরো উচ্চতা দেয় $(window).height()

পরিবর্তে, window.innerHeightআপনার উইন্ডোর উচ্চতা পুনরুদ্ধার করতে ব্যবহার করুন। প্রয়োজনীয় চেকটি হওয়া উচিত:

if($(window).scrollTop() + window.innerHeight > $(document).height() - 50) {
    console.log("reached bottom!");
}

Answer 25

স্পষ্টতই আমার জন্য যা কাজ করেছিল তা 'দেহ' ছিল এবং 'উইন্ডো' এর মতো নয়:

$('body').scroll(function() {


 if($('body').scrollTop() + $('body').height() == $(document).height()) {
     //alert at buttom
 }
 });

ক্রস ব্রাউজার সামঞ্জস্যের ব্যবহারের জন্য:

  function getheight(){
    var doc = document;
    return  Math.max(
        doc.body.scrollHeight, doc.documentElement.scrollHeight,
        doc.body.offsetHeight, doc.documentElement.offsetHeight,
        doc.body.clientHeight, doc.documentElement.clientHeight

        );
   }

এবং তারপরে $ (দস্তাবেজ) এর পরিবর্তে ight হাইট () ফাংশনটি getheight () কল করুন

$('body').scroll(function() {


   if($('body').scrollTop() + $('body').height() == getheight()  ) {
     //alert at bottom
 }
});

নীচের নীচের ব্যবহারের জন্য:

$('body').scroll(function() {


if($('body').scrollTop() + $('body').height() > getheight() -100 ) {
    //alert near bottom
 }
 });