ব্যবহারকারী যখন jQuery এর সাথে ডিভের নীচে স্ক্রোল করবেন তখন সনাক্ত করা হচ্ছে

Question

আমার ভিতরে একটি ডিভ বাক্স রয়েছে (বলা হয় ফ্লাক্স) ভিতরে ভ্যারিয়েবলের পরিমাণের সামগ্রী। এই ডিভবক্সটিতে অটোতে ওভারফ্লো সেট রয়েছে।

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

কিন্তু আমি কি এখানে তা করতে পারি না?

আমি প্রবাহ থেকে স্ক্রোলটপ নেওয়ার চেষ্টা করেছি, এবং তারপরে সমস্ত বিষয়বস্তুকে অভ্যন্তর নামে একটি ডিভের মধ্যে আবৃত করে রেখেছি তবে আমি যদি অভ্যন্তরের অভ্যন্তরীণ উচ্চতাটি গ্রহণ করি তবে এটি 564px (ডিভিটি উচ্চতা হিসাবে 500 হিসাবে সেট করা হয়) এবং 'ইনার্নার' এর উচ্চতা ফিরে আসে এটি 1064, এবং স্ক্রোল্টপ ফিরে আসে, যখন ডিভের নীচে 564 বলে।

আমি কি করতে পারি?

Answer 1

কিছু বৈশিষ্ট্য / পদ্ধতি আপনি ব্যবহার করতে পারেন:

$().scrollTop()//how much has been scrolled
$().innerHeight()// inner height of the element
DOMElement.scrollHeight//height of the content of the element

সুতরাং আপনি প্রথম দুটি বৈশিষ্ট্যের যোগফল নিতে পারেন এবং এটি শেষ সম্পত্তির সমান হয়ে গেলে আপনি শেষের দিকে পৌঁছে যান:

jQuery(function($) {
    $('#flux').on('scroll', function() {
        if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
            alert('end reached');
        }
    })
});

http://jsfiddle.net/doktormolle/w7X9N/

সম্পাদনা: আমি 'বাইন্ড' থেকে 'অন' আপডেট করেছি:

JQuery 1.7 হিসাবে, .on () পদ্ধতিটি কোনও নথিতে ইভেন্ট হ্যান্ডলার সংযুক্ত করার জন্য পছন্দসই পদ্ধতি।

Comments

এটি বাধ্যতামূলক করবে যখন ডিওএম নিশ্চিত হয়ে উঠবে যে # ফ্লাক্স-এলিমেন্ট ইতিমধ্যে উপলব্ধ।

— ডাঃমোল

আপনার

— বাইন্ডের

দ্রষ্টব্য: যখন কোনও ব্যবহারকারী তাদের ব্রাউজারে জুম স্তরগুলি ব্যবহার করেন, এটি কাজ নাও করতে পারে। জুম innerHeight()দশমিক প্রতিবেদন করার কারণ ঘটায় । একটি ব্যবহারকারী ক্ষেত্রে এর সমষ্টি জুম কমিয়ে, scrollTop()এবং innerHeight()সবসময় অন্তত ভগ্নাংশ সংক্ষিপ্ত হতে হবে scrollHeight। আমি 20px এর একটি বাফার অঞ্চল যুক্ত করে শেষ করেছি। ফলাফল শর্তযুক্ত if(el.scrollTop() + el.innerHeight() >= el[0].scrollHeight - 20)যেখানে elসমান ছিল $(this)।

— নিক

এটি আমার পক্ষে সবচেয়ে ভাল কাজ করা এটাই সেরা উত্তর। ধন্যবাদ

— আশীষ যাদব

এটি আর কাজ করছে না, আপনি কেন এটি কাজ করছেন না তা নিশ্চিত করতে পারেন, ধন্যবাদ

— উমির শাহ ইউসুফজাই

Answer 2

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

$(window).bind('scroll', function() {
    if($(window).scrollTop() >= $('.posts').offset().top + $('.posts').outerHeight() - window.innerHeight) {
        alert('end reached');
    }
});

এই উদাহরণে আপনি ডিভ ( .posts) এর সমাপ্তির পরে যদি নীচে স্ক্রোল করেন তবে আপনাকে একটি সতর্কতা দেবে।

Comments

এর জন্য আপনাকে ধন্যবাদ তবে আমি যখন ডিভের নীচে পৌঁছব তখন আমি কীভাবে ডিভ অ্যানিমেট করব? এছাড়াও আপনি যখন স্ক্রোল আপ যখন ডিভ শীর্ষ সনাক্ত তারপর এছাড়াও অ্যানিমেট। ঠিক যেমন এখানে এই ওয়েবসাইটে lazada.com.ph / পাশের আচরণটি উপভোগ করুন আশা করি আপনি আমাকে সহায়তা করতে পারবেন :)

— অ্যালিসা রেয়েস

এটি ম্যাজিকের মতো কাজ করে তবে সমস্যাটি হ'ল সতর্কতাটি দু'বার কার্যকর করা হয়েছে তাই আপনার যদি কোনও অভ্যন্তরের কোনও কল আসে তবে এটি দুটি বার কার্যকর করা হবে

— আফাফ

@ 1616 এর var running = falseআগে আমার একটি পরিবর্তনশীল ঘোষণা হয়েছে। শর্তসাপেক্ষে ভিতরে, আমি if(!running) { running = true; // and continue logic } এটি একবার মাত্র বলা হয় এই ভাবে পরীক্ষা ! যখন running = false;

— এজেএক্স

এটি উইন্ডো সম্পর্কে, তবে প্রশ্নটি ডিভ সম্পর্কে।

— আলেকজান্ডার ভোলকভ

Answer 3

যদিও প্রশ্নটি 5.5 বছর আগে জিজ্ঞাসা করা হয়েছিল, তবুও এটি আজকের ইউআই / ইউএক্স প্রসঙ্গে প্রাসঙ্গিক চেয়ে বেশি। এবং আমি আমার দুটি সেন্ট যোগ করতে চাই।

var element = document.getElementById('flux');
if (element.scrollHeight - element.scrollTop === element.clientHeight)
    {
        // element is at the end of its scroll, load more content
    }

উৎস: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight#Determine_if_an_element_has_been_totally_scrolled

কিছু উপাদান আপনাকে উপাদানটির পুরো উচ্চতা স্ক্রোল করতে দেয় না। এই ক্ষেত্রে আপনি ব্যবহার করতে পারেন:

var element = docuement.getElementById('flux');
if (element.offsetHeight + element.scrollTop === element.scrollHeight) {
  // element is at the end of its scroll, load more content
}

Comments

আপনি jQuery ব্যবহার না করা হলে আপনি এটি সমাধান সন্ধান করছেন।

— পিটার পিটারসন

ইভেন্ট হ্যান্ডলার আছে?

— আলেকজান্ডার ভোলকভ

@ আলেকজান্ডারভোলকভ অনস্ক্রোল সম্পর্কিত ঘটনা।

— চিন্তা

Answer 4

আমি স্ক্রোল করতে চাই এমন একটি নির্দিষ্ট ডিভের সমাধানের সন্ধান করার সময় আমি এটি খুঁজে পেয়েছি মাত্র একটি অতিরিক্ত নোট। আমার দৃশ্যের জন্য আমি দেখতে পেলাম যে ডিভের প্যাডিংটি বিবেচনায় নেওয়া আরও ভাল তবে আমি শেষটি হিট করতে পারি। সুতরাং @ ডাঃমোলের উত্তরটি প্রসারিত করে আমি নিম্নলিখিতটি যুক্ত করছি

$('#flux').bind('scroll', function() {
    var scrollPosition = $(this).scrollTop() + $(this).outerHeight();
    var divTotalHeight = $(this)[0].scrollHeight 
                          + parseInt($(this).css('padding-top'), 10) 
                          + parseInt($(this).css('padding-bottom'), 10)
                          + parseInt($(this).css('border-top-width'), 10)
                          + parseInt($(this).css('border-bottom-width'), 10);

    if( scrollPosition == divTotalHeight )
    {
      alert('end reached');
    }
  });

এটি আপনাকে প্যাডিং এবং সীমানা সহ যথাযথ অবস্থান দেবে

Answer 5

এটি যদিও আমার জন্য কাজ করেছে

$(window).scroll(function() {
  if ($(window).scrollTop() >= (($(document).height() - $(window).height()) - $('#divID').innerHeight())) {
    console.log('div reached');
  }
});

Answer 6

আপনার যদি এটি কোনও ডিভিতে ব্যবহার করার প্রয়োজন হয় যা লুকানো বা স্ক্রোল হিসাবে ওভারফ্লো-ওয়াই থাকে তবে এর মতো কিছু আপনার প্রয়োজন হতে পারে।

if ($('#element').prop('scrollHeight') - $('#element').scrollTop() <= Math.ceil($('#element').height())) {
    at_bottom = true;
}

প্রোপ স্ক্রোলহাইটটি গোলাকার বলে মনে হচ্ছে, বা সম্ভবত অন্য কোনও কারণে এটি 1 এর চেয়ে কম হয়ে গেছে বলে সিলটি দরকার হয়েছিল I

Answer 7

আপনি যদি ম্যাথ.াউন্ড () ফাংশনটি ব্যবহার না করে থাকেন তবে ডক্টর মোলের প্রস্তাবিত সমাধানটি কোনও ক্ষেত্রে যখন ব্রাউজার উইন্ডোতে একটি জুম থাকে তখন কাজ করবে না।

উদাহরণস্বরূপ $ (এটি) .স্ক্রোলটপ () + $ (এটি) in ইনারহাইট () = 600

this (এটি) [0]। স্ক্রোলহাইট ফলন = 599.99998

600> = 599.99998 ব্যর্থ।

এখানে সঠিক কোডটি রয়েছে:

jQuery(function($) {
    $('#flux').on('scroll', function() {
        if(Math.round($(this).scrollTop() + $(this).innerHeight(), 10) >= Math.round($(this)[0].scrollHeight, 10)) {
            alert('end reached');
        }
    })
});

আপনার যদি কোনও কঠোর শর্তের প্রয়োজন না হয় তবে আপনি কিছু অতিরিক্ত মার্জিন পিক্সেলও যুক্ত করতে পারেন

var margin = 4

jQuery(function($) {
    $('#flux').on('scroll', function() {
        if(Math.round($(this).scrollTop() + $(this).innerHeight(), 10) >= Math.round($(this)[0].scrollHeight, 10) - margin) {
            alert('end reached');
        }
    })
});

Answer 8

সাধারণ ডোম ব্যবহারে আপনি শর্তটি পরীক্ষা করতে পারেন

element.scrollTop + element.clientHeight == element.scrollHeight

যদি সত্য হয় তবে আপনি শেষ পর্যন্ত পৌঁছেছেন।

Answer 9

যদি কারও scrollHeightহিসাবে হয়ে থাকে undefined, তবে উপাদানগুলির প্রথম মুল্য নির্বাচন করুন:mob_top_menu[0].scrollHeight

Answer 10

নিশ্চিত না যে এটি কোনও সহায়তা কিনা তবে আমি এটি এটিই করি।

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

শুভেচ্ছা।

<style type="text/css">
    .fixed_Bot {    
            position: fixed;     
            bottom: 24px;    
        }     
</style>

<script type="text/javascript">
    $(document).ready(function () {
        var sidebarheight = $('#index').height();
        var windowheight = $(window).height();


        $(window).scroll(function () {
            var scrollTop = $(window).scrollTop();

            if (scrollTop >= sidebarheight - windowheight){
                $('#index').addClass('fixed_Bot');
            }
            else {
                $('#index').removeClass('fixed_Bot');
            }                   
        });
    });

</script>

Answer 11

যদিও এটি প্রায় 6 বছর আগে জিজ্ঞাসা করা হয়েছিল, ইউএক্স ডিজাইনের আগে এখনও গরম বিষয়, যদি কোনও নবাগত ব্যবহার করতে চান তবে এখানে ডেমো স্নিপেট রয়েছে

$(function() {

  /* this is only for demonstration purpose */
  var t = $('.posts').html(),
    c = 1,
    scroll_enabled = true;

  function load_ajax() {

    /* call ajax here... on success enable scroll  */
    $('.posts').append('<h4>' + (++c) + ' </h4>' + t);

    /*again enable loading on scroll... */
    scroll_enabled = true;

  }


  $(window).bind('scroll', function() {
    if (scroll_enabled) {

      /* if 90% scrolled */
    if($(window).scrollTop() >= ($('.posts').offset().top + $('.posts').outerHeight()-window.innerHeight)*0.9) {

        /* load ajax content */
        scroll_enabled = false;  
        load_ajax();
      }

    }

  });

});

h4 {
  color: red;
  font-size: 36px;
  background-color: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="posts">
  Lorem ipsum dolor sit amet  Consectetuer augue nibh lacus at <br> Pretium Donec felis dolor penatibus <br> Phasellus consequat Vivamus dui lacinia <br> Ornare nonummy laoreet lacus Donec <br> Ut ut libero Curabitur id <br> Dui pretium hendrerit
  sapien Pellentesque <br> Lorem ipsum dolor sit amet <br> Consectetuer augue nibh lacus at <br> Pretium Donec felis dolor penatibus <br> Phasellus consequat Vivamus dui lacinia <br> Ornare nonummy laoreet lacus Donec <br> Ut ut libero Curabitur id <br>  Dui pretium hendrerit sapien Pellentesque <br> Lorem ipsum dolor sit amet <br> Consectetuer augue nibh lacus at <br> Pretium Donec felis dolor penatibus <br> Phasellus consequat Vivamus dui lacinia <br> Ornare nonummy laoreet lacus Donec <br> Ut ut
  libero Curabitur id <br> Dui pretium hendrerit sapien Pellentesque <br> Lorem ipsum dolor sit amet <br> Consectetuer augue nibh lacus at <br> Pretium Donec felis dolor penatibus <br> Phasellus consequat Vivamus dui lacinia <br> Ornare nonummy laoreet
  lacus Donec <br> Ut ut libero Curabitur id <br> Dui pretium hendrerit sapien Pellentesque
</div>

Answer 12

বলছি এটি জুম ইস্যুটির সমাধান, এটি আপনার প্রয়োজন হলে সমস্ত জুম স্তরের সাথে এটি কাজ করে:

if ( Math.abs(elem.offset().top) + elem.height() + elem.offset().top >= elem.outerHeight() ) {
                    console.log("bottom");
                    // We're at the bottom!
                }
            });
        }

Answer 13

$(window).on("scroll", function() {
    //get height of the (browser) window aka viewport
    var scrollHeight = $(document).height();
    // get height of the document 
    var scrollPosition = $(window).height() + $(window).scrollTop();
    if ((scrollHeight - scrollPosition) / scrollHeight === 0) {
        // code to run when scroll to bottom of the page
    }
});

এটি গিথুব-এ কোড।

Answer 14

এখানে অন্য সংস্করণ।

মূল কোডটি ফাংশন স্ক্রোলার () যা ওভারফ্লো: স্ক্রোল ব্যবহার করে স্ক্রোলিং বিভাগটি ডিভের উচ্চতা হিসাবে ইনপুট নেয় takes এটি শীর্ষ থেকে নীচে থেকে নীচে থেকে উপরে থেকে 5px বা নীচে থেকে 10px প্রায় অনুমান করে। অন্যথায় এটি খুব সংবেদনশীল। দেখে মনে হচ্ছে 10px সর্বনিম্ন প্রায়। নীচের উচ্চতাটি পেতে আপনি এটি ডিভ উচ্চতায় 10 টি যুক্ত দেখতে পাবেন। আমি ধরে নিয়েছি 5px কাজ করতে পারে, আমি ব্যাপকভাবে পরীক্ষা করিনি। YMMV। স্ক্রোলহাইটটি অভ্যন্তরের স্ক্রোলিং অঞ্চলের উচ্চতা প্রদান করে, ডিভের প্রদর্শিত উচ্চতা নয়, যা এই ক্ষেত্রে 400px।

<?php

$scrolling_area_height=400;
echo '
<script type="text/javascript">
          function scroller(ourheight) {
            var ourtop=document.getElementById(\'scrolling_area\').scrollTop;
            if (ourtop > (ourheight-\''.($scrolling_area_height+10).'\')) {
                alert(\'at the bottom; ourtop:\'+ourtop+\' ourheight:\'+ourheight);
            }
            if (ourtop <= (5)) {
                alert(\'Reached the top\');
            }
          }
</script>

<style type="text/css">
.scroller { 
            display:block;
            float:left;
            top:10px;
            left:10px;
            height:'.$scrolling_area_height.';
            border:1px solid red;
            width:200px;
            overflow:scroll; 
        }
</style>

$content="your content here";

<div id="scrolling_area" class="scroller">
onscroll="var ourheight=document.getElementById(\'scrolling_area\').scrollHeight;
        scroller(ourheight);"
        >'.$content.'
</div>';

?>

Comments

-1 কারণ পিএইচপি থেকে জাভাস্ক্রিপ্ট + সিএসএস কোড উত্পন্ন করা খারাপ অনুশীলন (বজায় রাখা শক্ত, কোনও পুনরায় ব্যবহারযোগ্যতা, কোনও ওয়েবসাইট অপ্টিমাইজেশন ইত্যাদি)। এছাড়াও @ আলেকজান্দার মিলার দ্বারা নির্দেশিত হিসাবে 10px অফসেটটি অ্যাকাউন্টে প্যাডিং নিয়ে ঠিক করা যেতে পারে। এই কোডটি ব্যবহার করার জন্য যে কেউ বিবেচনা করছেন, তার দু'বার ভাবা উচিত ...

— কাপাইটাইন উইটবার্ড