স্ক্রোলিংয়ের পরে উপাদানটি দৃশ্যমান কিনা তা কীভাবে পরীক্ষা করবেন?

1169

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

javascript  jquery  scroll 
— yoavf
সূত্র
42
তার অর্থ তিনি যে কোনও ব্রাউজার উইন্ডোতে প্রদত্ত উপাদান প্রদর্শিত হচ্ছে কিনা তা দেখার জন্য তিনি কোনও পদ্ধতি চান বা ব্যবহারকারী এটি দেখতে যদি স্ক্রোল করা প্রয়োজন।
— রোমেন লিনসোলাস
1
কোনও পাত্রে কোনও উপাদান সম্পূর্ণরূপে দৃশ্যমান কিনা তা পরীক্ষা করতে কেবলমাত্র একটি অতিরিক্ত নির্বাচক পরম যুক্ত করুন এবং এর জন্য পুনরায় এলিম কোডটি ব্যবহার করুন। Library.IsElementVisibleInContainer = function (elementSelector, containerSelector) { var containerViewTop = $(containerSelector).offset().top; var containerViewBottom = containerViewTop + $(containerSelector).height();
— লাইফস
4
— অড্রিয়াস মেসকাউকাস
1
— সুমিত
1
সমস্ত উত্তরগুলি রিফ্লো ট্রিগার করবে যাতে এটি বোতল ঘাড় হতে পারে, আপনি যদি সমর্থন করেন তবে ইন্টারসেকশনঅবার্সারটি ব্যবহার করুন । আধুনিক ব্রাউজারগুলিতে
— এটির

উত্তর:

1258

এই কৌতুক করতে হবে:

function isScrolledIntoView(elem)
{
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

সাধারণ ইউটিলিটি ফাংশন এটি আপনাকে এমন কোনও ইউটিলিটি ফাংশন কল করার অনুমতি দেবে যা আপনি যে উপাদানটি সন্ধান করছেন তা গ্রহণ করে এবং আপনি যদি উপাদানটি সম্পূর্ণরূপে দেখতে বা আংশিকভাবে দেখতে চান।

function Utils() {

}

Utils.prototype = {
    constructor: Utils,
    isElementInView: function (element, fullyInView) {
        var pageTop = $(window).scrollTop();
        var pageBottom = pageTop + $(window).height();
        var elementTop = $(element).offset().top;
        var elementBottom = elementTop + $(element).height();

        if (fullyInView === true) {
            return ((pageTop < elementTop) && (pageBottom > elementBottom));
        } else {
            return ((elementTop <= pageBottom) && (elementBottom >= pageTop));
        }
    }
};

var Utils = new Utils();

ব্যবহার

var isElementInView = Utils.isElementInView($('#flyout-left-container'), false);

if (isElementInView) {
    console.log('in view');
} else {
    console.log('out of view');
}
— স্কট ডাউডিং
সূত্র
52
মনে রাখবেন যে ডকুমেন্টটি যদি উপাদানটি স্ক্রল করা হয় তবে এটি কাজ করে, যেমন আপনি কোনও স্ক্রোলিং অভ্যন্তরের ফলকের ভিতরে কোনও উপাদানটির দৃশ্যমানতা পরীক্ষা করছেন না।
— অ্যান্ড্রু বি।
8
কিভাবে একটু অফসেট যুক্ত করবেন?
— জর্জেন পল
5
আমি window.innerHeightপরিবর্তে যখন ব্যবহার করেছি কেবল তখনই কাজ হয়েছিল
— ক্রিশ্চিয়ান শনর
2
জন্য elemTopআমি ব্যবহার $(elem).position().topএবং জন্য elemBottomআমি ব্যবহার elemTop + $(elem).outerHeight(true)।
— সারা ভেসেলস
13
এর জন্য: "দর্শনের উপাদানগুলির যে কোনও অংশ", আমি ব্যবহার করেছি: (((এলিমেটপ> = ডকভিউটোপ)) এবং& (এলিমেটপ <= ডকভিউটোপ)) & (এলিমেটম> = ডকভিউটোপ)) এবং (এলেমবটম <= ডকভিউবটম))
— গ্রিজলি
415

ভ্যানিলায় এই উত্তর :

function isScrolledIntoView(el) {
    var rect = el.getBoundingClientRect();
    var elemTop = rect.top;
    var elemBottom = rect.bottom;

    // Only completely visible elements return true:
    var isVisible = (elemTop >= 0) && (elemBottom <= window.innerHeight);
    // Partially visible elements return true:
    //isVisible = elemTop < window.innerHeight && elemBottom >= 0;
    return isVisible;
}
— bravedick
সূত্র
27
এই হওয়া উচিত নয় isVisible = elementTop < window.innerHeight && elementBottom >= 0? অন্যথায় পর্দার একটি উপাদান অর্ধেক মিথ্যা প্রত্যাবর্তন করে।
— gman
7
কোন। পৃষ্ঠায় কোনও উপাদান পুরোপুরি দৃশ্যমান কিনা তা আমি পরীক্ষা করে দেখছি। আপনি যদি কিছু অংশের দৃশ্যমানতা পরীক্ষা করতে চান - আপনি এই স্নিপেটটি কাস্টমাইজ করতে পারেন।
— ব্র্যাভডিক
15
আমি এই উত্তরটি নির্বাচিত উত্তরের চেয়ে ভাল সম্পাদন করতে পাই find সহজ।
— আদম ভেনিজিয়া
12
অনুমোদিত উত্তরের তুলনায়, শত শত উপাদানগুলির সাথে এটি ওয়াহায়ে আরও ভাল সম্পাদন করে।
— ncla
5
একটি ছোট্ট ফিডল এখানে প্রদর্শিত হচ্ছে দেখুন - jsfiddle.net/shaaraddalvi/4rp09jL0
— upInCloud
122

আপডেট: ইন্টারসেকশনওজারবার ব্যবহার করুন

আমি এখনও অবধি সেরা পদ্ধতিটি খুঁজে পেয়েছি হ'ল jQuery প্রদর্শিত প্লাগইন । একটি যাদুমন্ত্র মত কাজ করে.

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

$('#foo').appear(function() {
  $(this).text('Hello world');
});

এই প্লাগইনটি লুকিয়ে থাকা বা দৃশ্যমান অঞ্চলের বাইরে থাকা সামগ্রীর জন্য অপ্রয়োজনীয় অনুরোধগুলি প্রতিরোধ করতে ব্যবহার করা যেতে পারে।

— জো লেনসিওনি
সূত্র
30
এটি একটি দুর্দান্ত প্লাগইন, সন্দেহ নেই, তবে প্রশ্নের উত্তর দেয় না।
— জন অ্যাডামস
5
JQuery- প্রদর্শিত প্লাগইনটি মূল পৃষ্ঠার ক্ষেত্রের সামগ্রীর জন্য ভাল তবে দুর্ভাগ্যক্রমে ওভারফ্লো সহ স্থির আকারের স্ক্রোলিং ডিভগুলি রয়েছে issues ঘটনাটি অকালে আগুন লাগতে পারে যখন সীমাবদ্ধ উপাদানটি পৃষ্ঠার দর্শনযোগ্য ক্ষেত্রের মধ্যে থাকে তবে ডিভের দর্শনীয় ক্ষেত্রের বাইরে থাকে এবং তারপরে যখন উপাদানটি ডিভিতে প্রদর্শিত হয় তখন প্রত্যাশার মতো আগুন হয় না।
— পিটার
17
একটি অদৃশ্য প্লাগইন আছে?
— শামুন
3
@ শামুন এর উত্সটি পরীক্ষা করে দেখুন appear pluginএবং সম্ভবত !একটি disappearপ্লাগইন পেতে আপনার কোনও জায়গায় যুক্ত হওয়া দরকার ।
— ভাগ্যবান সনি
5
একটি দ্রষ্টব্য হিসাবে, এটি jQuery 1.11.X github.com/morr/jquery.appear/issues/37
— জেসন পারহাম
86

এখানে আমার খাঁটি জাভাস্ক্রিপ্ট সমাধানটি কার্যকর হয় যদি এটি কোনও স্ক্রোলযোগ্য ধারকের মধ্যেও লুকিয়ে থাকে তবে তা কাজ করে।

ডেমো এখানে (উইন্ডোটিও আকার পরিবর্তন করার চেষ্টা করুন)

var visibleY = function(el){
  var rect = el.getBoundingClientRect(), top = rect.top, height = rect.height, 
    el = el.parentNode
  // Check if bottom of the element is off the page
  if (rect.bottom < 0) return false
  // Check its within the document viewport
  if (top > document.documentElement.clientHeight) return false
  do {
    rect = el.getBoundingClientRect()
    if (top <= rect.bottom === false) return false
    // Check if the element is out of view due to a container scrolling
    if ((top + height) <= rect.top) return false
    el = el.parentNode
  } while (el != document.body)
  return true
};

সম্পাদনা 2016-03-26: আমি উপাদানটি অতীতের স্ক্রোলিংয়ের জন্য অ্যাকাউন্টে সমাধানটি আপডেট করেছি যাতে এটি স্ক্রোল-সক্ষম ধারকটির উপরে উপরে লুকানো থাকে। সম্পাদনা 2018-10-08: স্ক্রিনের উপরে দেখার বাইরে স্ক্রোল করার সময় হ্যান্ডেলটি আপডেট করা হয়েছে।

— মিত্র
সূত্র
ধন্যবাদ, সম্ভবত আরও ভাল হতে হবে return top <= document.documentElement.clientHeight && top >= 0;
— ইউসুফ সলিমপুর
16
+1 এটিই একমাত্র কোডেড (তৃতীয় পক্ষ নয়) উত্তর যা উপাদানগুলির পুনরাবৃত্ত প্রকৃতি বিবেচনা করে। আমি অনুভূমিক, উল্লম্ব এবং পৃষ্ঠা স্ক্রোলটি পরিচালনা করতে প্রসারিত করেছি: jsfiddle.net/9nuqpgqa
— পেব্ল
3
এই দ্রবণটি কেবলমাত্র এলিমেন্টের উপরে পরীক্ষা করে। যদি প্রথম শীর্ষ পিক্সেলটি দৃশ্যমান হয় তবে বাকী আইটেমটি দৃশ্যমান না হলেও এটি সত্য হবে। পুরো উপাদানটি দৃশ্যমান কিনা তা পরীক্ষা করতে আপনাকে নীচের সম্পত্তিটিও পরীক্ষা করতে হবে।
— Wojciech Jakubas
2
আয়ে, ঝরঝরে! এই উত্তরটি লিখতে সহায়তা করার জন্য ব্যবহার করা হয়েছে (জেএস মন্তব্য হিসাবে ক্রেডিট সহ)।
— রোমের -1888
অনুপস্থিত;
— লুপটিতে
45

ইন্টারসেকশনওজারবার এপিআই ব্যবহার করে (আধুনিক ব্রাউজারগুলিতে নেটিভ)

কোনও পর্যবেক্ষক ব্যবহার করে কোনও উপাদান ভিউপারে বা কোনও স্ক্রোলযোগ্য পাত্রে দৃশ্যমান কিনা তা নির্ধারণ করা সহজ এবং দক্ষ ।

একটি scrollইভেন্ট সংযুক্ত করার প্রয়োজন এবং ম্যানুয়ালি ইভেন্টের কলব্যাক যাচাইয়ের প্রয়োজনটি মুছে ফেলা হয়, এইভাবে দক্ষতা:

// this is the target which is observed
var target = document.querySelector('div');

// configure the intersection observer instance
var intersectionObserverOptions = {
  root: null,
  rootMargin: '150px',
  threshold: 1.0
}
    
var observer = new IntersectionObserver(onIntersection, intersectionObserverOptions);

// provide the observer with a target
observer.observe(target);

function onIntersection(entries){
  entries.forEach(entry => {
    console.clear();
    console.log(entry.intersectionRatio)
    target.classList.toggle('visible', entry.intersectionRatio > 0);
    
    // Are we in viewport?
    if (entry.intersectionRatio > 0) {
      // Stop watching 
      // observer.unobserve(entry.target);
    }
  });
}
.box{ width:100px; height:100px; background:red; margin:1000px; }
.box.visible{ background:green; }
Scroll both Vertically & Horizontally...
<div class='box'></div>
স্নিপেট প্রসারিত করুন

ব্রাউজারগুলি সমর্থন টেবিল দেখুন (আইই / সাফারিতে সমর্থিত নয়)

— VSync
সূত্র
4
ধন্যবাদ! এটি আমার পক্ষে কাজ করে এবং এটি আইথ
— ম্যাট উইলসন
এখন পর্যন্ত সেরা সমাধান। পলিফিল ছাড়াই আইই ১১ এ কাজ করেছেন!
— ফ্যাবিয়ান ভন এলার্টস
মনে রাখবেন যে দুর্ভাগ্যক্রমে এই স্টিলটি আইওএস / ম্যাকোস সাফারিতে সমর্থিত নয়। আপনি পলিফিল বেছে নিলে পারফেক্ট ইস্যুগুলি পরীক্ষা করে নেওয়ার বিষয়টি নিশ্চিত করুন, এটি ব্যবহারকারীর একটি বিশাল গ্রুপ
— লেল্যান্ড
@ লিল্যান্ড - এটি প্রকল্প নির্ভর। আমার সমস্ত প্রকল্পের জন্য এটি একটি নিখুঁত 0 ব্যবহারকারী গ্রুপ। আমি ওয়েবসাইটগুলি তৈরি করি না তবে ওয়েব সিস্টেম;)
— vsync
আমি এটি বেশ কয়েকটি উপাদানগুলির একটি লুপে চালানোর চেষ্টা করছি, তবে এটি কার্যকর নয়। কোন ধারনা? আমি সেই লুপটিতে লক্ষ্য যুক্ত করার জন্য উপাদানটি যুক্ত করছি।
— সাসচা গ্রিন্ডাউ
42

jQuery ওয়েপয়েন্টস প্লাগইন এখানে খুব সুন্দর যায়।

$('.entry').waypoint(function() {
   alert('You have scrolled to an entry.');
});

প্লাগইনের সাইটে কয়েকটি উদাহরণ রয়েছে ।

— ফেদির আরওয়াইকিটিক
সূত্র
3
আমার জন্য এটি কেবল অফসেটে কাজ করেছে $('#my-div').waypoint(function() { console.log('Hello there!'); }, { offset: '100%' });
— লেইম্যানেক্স
21

কেমন

function isInView(elem){
   return $(elem).offset().top - $(window).scrollTop() < $(elem).height() ;
}

এরপরে আপনি উপাদানটি একবারের মতো দেখতে চাইলে যা যা ট্রিগার করতে পারেন 

$(window).scroll(function(){
   if (isInView($('.classOfDivToCheck')))
      //fire whatever you what 
      dothis();
})

এটা আমার জন্য ঠিক কাজ করে

— webicy
সূত্র
1
এটি আমার পক্ষে কাজ করে, তবে আমি স্ট্যাকওভারফ্লো.com/Qestions/487073/… এ স্ক্রোলড ইন্টিভিউ, আপাতদৃষ্টিতে আরও সম্পূর্ণ, ফাংশনটি ব্যবহার করেছি :)
— Meetai.com
3
আমি মনে করি এটি $ (উইন্ডো) হতে হবে। স্ক্রোলটপ () <$ (এলেম)। অফসেট ()। শীর্ষ + $ (এলেম)। উচ্চতা ();
— তরুণ
আমার পরিবর্তনটি এরকম হবে: `রিটার্ন $ (উইন্ডো)। স্ক্রোলটপ () + $ (উইন্ডো)। উচ্চতা ()> $ (এলেম)। অফসেট () শীর্ষ + $ (এলেম)। উচ্চতা (); `
— বুবোনকোড
15

WebResourcesDepot স্ক্রল করার সময় লোড করার জন্য একটি স্ক্রিপ্ট লিখেছিল যা কিছু সময় আগে jQuery ব্যবহার করে । আপনি তাদের লাইভ ডেমোটি এখানে দেখতে পারেন । তাদের কার্যকারিতার গরুর মাংসটি ছিল:

$(window).scroll(function(){
  if  ($(window).scrollTop() == $(document).height() - $(window).height()){
    lastAddedLiveFunc();
  }
});

function lastAddedLiveFunc() { 
  $('div#lastPostsLoader').html('<img src="images/bigLoader.gif">');
  $.post("default.asp?action=getLastPosts&lastPostID="+$(".wrdLatest:last").attr("id"),
    function(data){
        if (data != "") {
          $(".wrdLatest:last").after(data);         
        }
      $('div#lastPostsLoader').empty();
    });
};
— স্যাম্পসন
সূত্র
15

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

function isScrolledIntoView(elem)
{
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();
    var elemTop = $(elem).offset().top;
    return ((elemTop <= docViewBottom) && (elemTop >= docViewTop));
}
— স্নিগ্ধা বাতরা
সূত্র
12

যাচাই করুন প্লেইন ভ্যানিলা যদি উপাদান ( el) স্ক্রোলযোগ্য DIV আছে দৃশ্যমান ( holder)

function isElementVisible (el, holder) {
  holder = holder || document.body
  const { top, bottom, height } = el.getBoundingClientRect()
  const holderRect = holder.getBoundingClientRect()

  return top <= holderRect.top
    ? holderRect.top - top <= height
    : bottom - holderRect.bottom <= height
},

JQuery সঙ্গে ব্যবহার:

var el = $('tr:last').get(0);
var holder = $('table').get(0);
isVisible =  isScrolledIntoView(el, holder);
— ডেনিস মাটাফোনভ
সূত্র
2
একক পৃষ্ঠা অ্যাপ্লিকেশনগুলির যুগে এটি উইন্ডো ছাড়াও অন্য কোনও উপাদানগুলির মধ্যে কোনও উপাদান দৃশ্যমান কিনা তা পরীক্ষা করা আরও সাধারণ হয়ে উঠেছে । এই কারণেই এটি আমার উপার্জন পায়।
— এইচ ডগ
8

ইস্ক্রোলডআইন্টোভিউ একটি খুব প্রয়োজনীয় ফাংশন, তাই আমি এটি চেষ্টা করে দেখলাম, এটি ভিউপোর্টের চেয়ে বেশি নয় এমন উপাদানগুলির জন্য কাজ করে, তবে ভিউপোর্ট হিসাবে উপাদানটি যদি বড় হয় তবে এটি কাজ করে না। এটি ঠিক করার জন্য সহজেই শর্তটি পরিবর্তন করুন

return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));

এটি:

return (docViewBottom >= elemTop && docViewTop <= elemBottom);

ডেমো এখানে দেখুন: http://jsfiddle.net/RRSmQ/

— রবার্ট
সূত্র
8

এখানে বেশিরভাগ উত্তরগুলি বিবেচনায় নেই যে কোনও উপাদানটিও লুকিয়ে থাকতে পারে কারণ এটি কেবল পুরো পৃষ্ঠার নয়, একটি ডিভের দৃষ্টিতে স্ক্রোল করা।

সেই সম্ভাবনাটি coverাকতে, আপনাকে মূলত এটি পরীক্ষা করতে হবে যে উপাদানটি তার প্রতিটি পিতামাতার সীমানার মধ্যে অবস্থান করছে কিনা।

এই সমাধানটি ঠিক তা করে:

function(element, percentX, percentY){
    var tolerance = 0.01;   //needed because the rects returned by getBoundingClientRect provide the position up to 10 decimals
    if(percentX == null){
        percentX = 100;
    }
    if(percentY == null){
        percentY = 100;
    }

    var elementRect = element.getBoundingClientRect();
    var parentRects = [];

    while(element.parentElement != null){
        parentRects.push(element.parentElement.getBoundingClientRect());
        element = element.parentElement;
    }

    var visibleInAllParents = parentRects.every(function(parentRect){
        var visiblePixelX = Math.min(elementRect.right, parentRect.right) - Math.max(elementRect.left, parentRect.left);
        var visiblePixelY = Math.min(elementRect.bottom, parentRect.bottom) - Math.max(elementRect.top, parentRect.top);
        var visiblePercentageX = visiblePixelX / elementRect.width * 100;
        var visiblePercentageY = visiblePixelY / elementRect.height * 100;
        return visiblePercentageX + tolerance > percentX && visiblePercentageY + tolerance > percentY;
    });
    return visibleInAllParents;
};

এটি প্রতিটি দিক থেকে এটি কত শতাংশে দৃশ্যমান হবে তা নির্দিষ্ট করতে দেয়।
এটি অন্যান্য কারণগুলির কারণে এটি লুকিয়ে থাকতে পারে এমন সম্ভাবনাটি কভার করে না display: hidden।

এটি সমস্ত বড় ব্রাউজারগুলিতে কাজ করা উচিত, যেহেতু এটি কেবল ব্যবহার করে getBoundingClientRect। আমি ব্যক্তিগতভাবে এটি ক্রোম এবং ইন্টারনেট এক্সপ্লোরার 11 এ পরীক্ষা করেছি।

— Domysee
সূত্র
এই কোডের জন্য আপনাকে ধন্যবাদ। আমি অবাক হই যে আপনি কীভাবে ইভেন্ট শ্রোতাকে এই ক্ষেত্রে স্ক্রলে যুক্ত করবেন যে আপনার একাধিক নেস্টেড স্ক্রোলযোগ্য উপাদান রয়েছে? দেখে মনে হচ্ছে শ্রোতাদের একা উইন্ডোতে যুক্ত করা যথেষ্ট নয়, প্রতিটি স্ক্রোলযোগ্য ধারকটিতে শ্রোতাদের যুক্ত করতে কি আমাদের শীর্ষ পিতামাতার কাছে ফিরে যেতে হবে?
— mr1031011
@ mr1031011 হ্যান্ডলারটি উইন্ডোতে যুক্ত করা এবং তারপরে স্ক্রলযুক্ত ধারকটি সনাক্ত করার জন্য লক্ষ্যটি পরীক্ষা করা উচিত।
— ডোমসি
ঠিক আছে, এটি @vanowm দ্বারা প্রদত্ত উদাহরণের সাথে কাজ করে না
— mr1031011
7 
function isScrolledIntoView(elem) {
    var docViewTop = $(window).scrollTop(),
        docViewBottom = docViewTop + $(window).height(),
        elemTop = $(elem).offset().top,
     elemBottom = elemTop + $(elem).height();
   //Is more than half of the element visible
   return ((elemTop + ((elemBottom - elemTop)/2)) >= docViewTop && ((elemTop + ((elemBottom - elemTop)/2)) <= docViewBottom));
}
— পাস্কাল গাগনূর
সূত্র
7

Http://web-profile.com.ua/ থেকে অন্য একটি সমাধান এখানে দেওয়া হয়েছে

<script type="text/javascript">
$.fn.is_on_screen = function(){
    var win = $(window);
    var viewport = {
        top : win.scrollTop(),
        left : win.scrollLeft()
    };
    viewport.right = viewport.left + win.width();
    viewport.bottom = viewport.top + win.height();

    var bounds = this.offset();
    bounds.right = bounds.left + this.outerWidth();
    bounds.bottom = bounds.top + this.outerHeight();

    return (!(viewport.right < bounds.left || viewport.left > bounds.right ||    viewport.bottom < bounds.top || viewport.top > bounds.bottom));
 };

if( $('.target').length > 0 ) { // if target element exists in DOM
    if( $('.target').is_on_screen() ) { // if target element is visible on screen after DOM loaded
        $('.log').html('<div class="alert alert-success">target element is visible on screen</div>'); // log info       
    } else {
        $('.log').html('<div class="alert">target element is not visible on screen</div>'); // log info
    }
}
$(window).scroll(function(){ // bind window scroll event
if( $('.target').length > 0 ) { // if target element exists in DOM
    if( $('.target').is_on_screen() ) { // if target element is visible on screen after DOM loaded
        $('.log').html('<div class="alert alert-success">target element is visible on screen</div>'); // log info
    } else {
        $('.log').html('<div class="alert">target element is not visible on screen</div>'); // log info
    }
}
});
</script>

এটি জেএসফিডেলে দেখুন

— অ্যাড্রিয়ান পি।
সূত্র
7

এটি উপাদানকে যে কোনও প্যাডিং, সীমানা বা মার্জিনের পাশাপাশি ভিউপোর্টের চেয়ে বড় উপাদানগুলি বিবেচনা করে।

function inViewport($ele) {
    var lBound = $(window).scrollTop(),
        uBound = lBound + $(window).height(),
        top = $ele.offset().top,
        bottom = top + $ele.outerHeight(true);

    return (top > lBound && top < uBound)
        || (bottom > lBound && bottom < uBound)
        || (lBound >= top && lBound <= bottom)
        || (uBound >= top && uBound <= bottom);
}

এটিকে কিছু ব্যবহার করতে কল করতে:

var $myElement = $('#my-element'),
    canUserSeeIt = inViewport($myElement);

console.log(canUserSeeIt); // true, if element is visible; false otherwise
— ব্রেন্ট বারবাতা
সূত্র
7

ইনভিউ নামে jQuery এর জন্য একটি প্লাগইন রয়েছে যা একটি নতুন "ইনভিউ" ইভেন্ট যুক্ত করে।

এখানে jQuery প্লাগইনের জন্য কিছু কোড রয়েছে যা ইভেন্টগুলি ব্যবহার করে না:

$.extend($.expr[':'],{
    inView: function(a) {
        var st = (document.documentElement.scrollTop || document.body.scrollTop),
            ot = $(a).offset().top,
            wh = (window.innerHeight && window.innerHeight < $(window).height()) ? window.innerHeight : $(window).height();
        return ot > st && ($(a).height() + ot) < (st + wh);
    }
});

(function( $ ) {
    $.fn.inView = function() {
        var st = (document.documentElement.scrollTop || document.body.scrollTop),
        ot = $(this).offset().top,
        wh = (window.innerHeight && window.innerHeight < $(window).height()) ? window.innerHeight : $(window).height();

        return ot > st && ($(this).height() + ot) < (st + wh);
    };
})( jQuery );

আমি এখানে একটি মন্তব্যে এটি পেয়েছি ( http://remysharp.com/2009/01/26/element-in-view-event-plugin/ ) জেমস নামে একটি ব্লকের

— নেস-ই ই
সূত্র
হায়, jQuery পর্যালোচনা আর রক্ষণাবেক্ষণ করা হয় না এবং jQuery এর বর্তমান সংস্করণগুলির সাথে কাজ করে না।
— মাইকম্যাকানা
1
JQuery 1 লেগাস্ ব্রাউজার সমর্থনের জন্য, নতুন বৈশিষ্ট্য 2. jQuery মধ্যে হয়
— mikemaccana
পৃষ্ঠা আপডেট হওয়ার কারণে লিঙ্কটি উদাহরণটি দেখায় না।
— প্রোগ্রামিংয়ের অধ্যাপক
6

আমার স্ক্রোলযোগ্য ডিআইভি ধারকটির ভিতরে থাকা উপাদানগুলির দৃশ্যমানতা পরীক্ষা করা দরকার

    //p = DIV container scrollable
    //e = element
    function visible_in_container(p, e) {
        var z = p.getBoundingClientRect();
        var r = e.getBoundingClientRect();

        // Check style visiblilty and off-limits
        return e.style.opacity > 0 && e.style.display !== 'none' &&
               e.style.visibility !== 'hidden' &&
               !(r.top > z.bottom || r.bottom < z.top ||
                 r.left > z.right || r.right < z.left);
    }
— Pigmalión
সূত্র
যদি আমি এই পরিবর্তন আমার জন্য কাজ করে e.style.opacity > 0যাওয়ার (!e.style.opacity || e.style.opacity > 0)কারণ এটি ডিফল্ট মুক্তিযোদ্ধা আমার জন্য খালি স্ট্রিং।
— ব্রেট জমির
6

এই দুর্দান্ত উত্তরের বিল্ডিং , আপনি এটি একটু আরো ES2015 ব্যবহার + + প্রক্রিয়া সহজ করতে পারেন:

function isScrolledIntoView(el) {
  const { top, bottom } = el.getBoundingClientRect()
  return top >= 0 && bottom <= window.innerHeight
}

আপনি যদি শীর্ষে উইন্ডোটির বাইরে চলে যাওয়ার বিষয়ে চিন্তা না করেন এবং নীচের অংশটি কেবল দেখেছে সেদিকে খেয়াল রাখেন তবে এটিকে আরও সরলীকৃত করা যেতে পারে

function isSeen(el) {
  return el.getBoundingClientRect().bottom <= window.innerHeight
}

এমনকি ওয়ান-লাইনারও

const isSeen = el => el.getBoundingClientRect().bottom <= window.innerHeight
— rpearce
সূত্র
4

আপনি যখন স্ক্রোল করবেন তখন উপাদানটি ভিউপোর্টে রয়েছে কিনা তা পরীক্ষা করতে আপনি jquery প্লাগইন "অনস্ক্রিন" ব্যবহার করতে পারেন। নির্বাচক যখন স্ক্রিনে উপস্থিত হয় তখন প্লাগইনটি নির্বাচকটির ": অনস্ক্রিন" কে সত্যে সেট করে। এটি প্লাগইনটির লিঙ্কটি যা আপনি আপনার প্রকল্পে অন্তর্ভুক্ত করতে পারেন। " http://benpickles.github.io/onScreen/jquery.onscreen.min.js "

আপনি নীচের উদাহরণটি চেষ্টা করতে পারেন যা আমার পক্ষে কাজ করে।

$(document).scroll(function() {
    if($("#div2").is(':onScreen')) {
        console.log("Element appeared on Screen");
        //do all your stuffs here when element is visible.
    }
    else {
        console.log("Element not on Screen");
        //do all your stuffs here when element is not visible.
    }
});

এইচটিএমএল কোড:

<div id="div1" style="width: 400px; height: 1000px; padding-top: 20px; position: relative; top: 45px"></div> <br>
<hr /> <br>
<div id="div2" style="width: 400px; height: 200px"></div>

সিএসএস:

#div1 {
    background-color: red;
}
#div2 {
    background-color: green;
}
— ভাসুকি দিলীপ
সূত্র
3

আমার অ্যাপ্লিকেশনটিতে আমার কাছে এমন পদ্ধতি রয়েছে তবে এটি jQuery ব্যবহার করে না:

/* Get the TOP position of a given element. */
function getPositionTop(element){
    var offset = 0;
    while(element) {
        offset += element["offsetTop"];
        element = element.offsetParent;
    }
    return offset;
}

/* Is a given element is visible or not? */
function isElementVisible(eltId) {
    var elt = document.getElementById(eltId);
    if (!elt) {
        // Element not found.
        return false;
    }
    // Get the top and bottom position of the given element.
    var posTop = getPositionTop(elt);
    var posBottom = posTop + elt.offsetHeight;
    // Get the top and bottom position of the *visible* part of the window.
    var visibleTop = document.body.scrollTop;
    var visibleBottom = visibleTop + document.documentElement.offsetHeight;
    return ((posBottom >= visibleTop) && (posTop <= visibleBottom));
}

সম্পাদনা করুন: এই পদ্ধতি IE (কমপক্ষে সংস্করণ 6) এর জন্য ভাল কাজ করে। এফএফের সাথে সামঞ্জস্যের জন্য মন্তব্যগুলি পড়ুন।

— রোমেন লিনসোলাস
সূত্র
2
কোনও কারণে ডকুমেন্ট.বডি.সক্রলটপ সর্বদা 0 (এফএফ 3 এ) প্রদান করে। এটিকে ভ্যার দৃশ্যমান শীর্ষে পরিবর্তন করুন (ডকুমেন্ট.ডোকামেন্টেলমেন্ট.স্রোলটপ? ডকুমেন্ট.ডোকামেন্টইমেন্ট.স্রোকলটপ: ডকুমেন্ট.ডি.স্রোকলটপ);
— yoavf
তার জন্য দুঃখিত। আমার অ্যাপ্লিকেশনটি কেবল আইই 6 6 তে চলতে হবে (হ্যাঁ, আমি ভাগ্যবান নই :(), তাই আমি এফএফ এ কখনও পরীক্ষা করিনি ...
— রোমেন লিনসোলাস
এটি সঠিক হলে এখানে সেরা উত্তর হবে। এটির জন্য আপনার একটি লাইন সংশোধন করুন: var visibleBottom = visibleTop + window.innerHeight;আমি jQuery ব্যবহার করছি না এবং আপনি আমাকে সঠিক উত্তর খুঁজে পেতে সহায়তা করেছেন।
— বিটারব্লু
3

আপনি যদি অন্য ডিভের মধ্যে আইটেম স্ক্রোল করার জন্য এটি টুইট করতে চান,

function isScrolledIntoView (elem, divID) 

{

    var docViewTop = $('#' + divID).scrollTop();


    var docViewBottom = docViewTop + $('#' + divID).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop)); 
}
— সামিয়া আক্তার
সূত্র
3

গ্রহণযোগ্য উত্তরটি সংশোধন করা হয়েছে যাতে উপাদানটির প্রদর্শন বৈশিষ্ট্যটি "কিছুই নয়" ব্যতীত অন্য কোনও কিছুতে দৃশ্যমান হিসাবে সেট করা থাকে।

function isScrolledIntoView(elem) {
   var docViewTop = $(window).scrollTop();
  var docViewBottom = docViewTop + $(window).height();

  var elemTop = $(elem).offset().top;
  var elemBottom = elemTop + $(elem).height();
  var elemDisplayNotNone = $(elem).css("display") !== "none";

  return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop) && elemDisplayNotNone);
}
— evanmcd
সূত্র
3

অনুভূমিক, উল্লম্ব বা উভয় ক্ষেত্রেই মটুলগুলি ব্যবহার করে একই জিনিস অর্জন করার একটি উপায় এখানে।

Element.implement({
inVerticalView: function (full) {
    if (typeOf(full) === "null") {
        full = true;
    }

    if (this.getStyle('display') === 'none') {
        return false;
    }

    // Window Size and Scroll
    var windowScroll = window.getScroll();
    var windowSize = window.getSize();
    // Element Size and Scroll
    var elementPosition = this.getPosition();
    var elementSize = this.getSize();

    // Calculation Variables
    var docViewTop = windowScroll.y;
    var docViewBottom = docViewTop + windowSize.y;
    var elemTop = elementPosition.y;
    var elemBottom = elemTop + elementSize.y;

    if (full) {
        return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom)
            && (elemBottom <= docViewBottom) && (elemTop >= docViewTop) );
    } else {
        return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
    }
},
inHorizontalView: function(full) {
    if (typeOf(full) === "null") {
        full = true;
    }

    if (this.getStyle('display') === 'none') {
        return false;
    }

    // Window Size and Scroll
    var windowScroll = window.getScroll();
    var windowSize = window.getSize();
    // Element Size and Scroll
    var elementPosition = this.getPosition();
    var elementSize = this.getSize();

    // Calculation Variables
    var docViewLeft = windowScroll.x;
    var docViewRight = docViewLeft + windowSize.x;
    var elemLeft = elementPosition.x;
    var elemRight = elemLeft + elementSize.x;

    if (full) {
        return ((elemRight >= docViewLeft) && (elemLeft <= docViewRight)
            && (elemRight <= docViewRight) && (elemLeft >= docViewLeft) );
    } else {
        return ((elemRight <= docViewRight) && (elemLeft >= docViewLeft));
    }
},
inView: function(full) {
    return this.inHorizontalView(full) && this.inVerticalView(full);
}});
— bmlkc
সূত্র
3

কোনও উপাদান 75% দৃশ্যমান কিনা তা পরীক্ষা করার জন্য এই উত্তরের ভিত্তিতে একটি উদাহরণ (যেমন 25% এরও কম স্ক্রিনটি বন্ধ রয়েছে)।

function isScrolledIntoView(el) {
  // check for 75% visible
  var percentVisible = 0.75;
  var elemTop = el.getBoundingClientRect().top;
  var elemBottom = el.getBoundingClientRect().bottom;
  var elemHeight = el.getBoundingClientRect().height;
  var overhang = elemHeight * (1 - percentVisible);

  var isVisible = (elemTop >= -overhang) && (elemBottom <= window.innerHeight + overhang);
  return isVisible;
}
— ব্রেন্ডন নী
সূত্র
3

এই প্রশ্নের 30 টিরও বেশি উত্তর রয়েছে এবং আমি কেউই ব্যবহার করছি না এমন আশ্চর্যরকম সহজ, খাঁটি জেএস সমাধান ব্যবহার করেন। এটি সমাধানের জন্য jQuery লোড করার দরকার নেই, অন্য অনেকে চাপ দিচ্ছেন বলে।

উপাদানটি ভিউপোর্টের মধ্যে রয়েছে কিনা তা জানানোর জন্য, আমাদের অবশ্যই প্রথমে শরীরের মধ্যে উপাদানগুলির অবস্থান নির্ধারণ করতে হবে। আমি একবার চিন্তা করেছিলাম হিসাবে আমাদের এটিকে পুনরাবৃত্তভাবে করার দরকার নেই। পরিবর্তে, আমরা ব্যবহার করতে পারেন element.getBoundingClientRect()।

pos = elem.getBoundingClientRect().top - document.body.getBoundingClientRect().top;

এই মানটি হ'ল বস্তুর শীর্ষ এবং দেহের শীর্ষের মধ্যে ওয়াই পার্থক্য।

আমাদের তখন অবশ্যই বলতে হবে যে উপাদানটি দেখার মধ্যে রয়েছে। বেশিরভাগ বাস্তবায়ন জিজ্ঞাসা করে যে সম্পূর্ণ উপাদানটি ভিউপোর্টের মধ্যে রয়েছে কিনা, তাই এটিই আমরা coverেকে রাখব।

প্রথমত, উইন্ডোর শীর্ষ অবস্থানটি হ'ল: window.scrollY ।

উইন্ডোর উচ্চতা এর শীর্ষ অবস্থানে যুক্ত করে আমরা উইন্ডোর নীচের অবস্থানটি পেতে পারি:

var window_bottom_position = window.scrollY + window.innerHeight;

উপাদানটির শীর্ষস্থান অর্জনের জন্য একটি সাধারণ ক্রিয়াকলাপ তৈরি করতে দেয়:

function getElementWindowTop(elem){
    return elem && typeof elem.getBoundingClientRect === 'function' ? elem.getBoundingClientRect().top - document.body.getBoundingClientRect().top : 0;
}

এই ফাংশনটি উইন্ডোটির মধ্যে উপাদানটির শীর্ষ অবস্থানটি ফিরিয়ে দেবে বা 0আপনি যদি এটির সাথে একটি উপাদান ছাড়া অন্য কোনও কিছু পাস করেন তবে এটি ফিরে আসবে.getBoundingClientRect() পদ্ধতিটির । এই পদ্ধতিটি দীর্ঘকাল ধরে রয়েছে, সুতরাং আপনার ব্রাউজারটি এটি সমর্থন করে না সে সম্পর্কে আপনাকে চিন্তা করার দরকার নেই।

এখন, আমাদের উপাদানটির শীর্ষ অবস্থান:

var element_top_position = getElementWindowTop(element);

এবং বা উপাদানটির নীচের অবস্থানটি হ'ল:

var element_bottom_position = element_top_position + element.clientHeight;

এখন আমরা ভিউপোর্টের শীর্ষ অবস্থানের তুলনায় উপাদানটির নীচের অবস্থানটি কম কিনা তা পরীক্ষা করে এবং উপাদানটির শীর্ষ অবস্থান ভিউপোর্টের নীচের অবস্থানের চেয়ে বেশি কিনা তা পরীক্ষা করে আমরা নির্ধারণ করতে পারি:

if(element_bottom_position >= window.scrollY 
&& element_top_position <= window_bottom_position){
    //element is in view
else
    //element is not in view

সেখান থেকে আপনি in-viewনিজের উপাদানটিতে কোনও শ্রেণি যুক্ত করতে বা সরাতে যুক্তিটি সম্পাদন করতে পারেন , যা আপনি পরে নিজের সিএসএসে রূপান্তর প্রভাব সহ পরিচালনা করতে পারবেন।

আমি পুরোপুরি বিস্মিত হয়েছি যে আমি এই সমাধানটি অন্য কোথাও পাইনি, তবে আমি বিশ্বাস করি যে এটিই সবচেয়ে পরিষ্কার এবং কার্যকর সমাধান, এবং এটি আপনাকে jQuery লোড করার প্রয়োজন হয় না!

— WebWanderer
সূত্র
খুব সুন্দর ব্যাখ্যা! তবে ইতিমধ্যে এমন উত্তর রয়েছে যা আপনি ঠিক যেমন করেন ঠিক
— তেমনই করেন
1
@ ডোমিসি হুম, আমি কোনওভাবে এড়িয়ে গেছি। যথেষ্ট ফর্সা। যদিও এটি নির্দেশ করার জন্য আপনাকে ধন্যবাদ। এটি অন্যভাবে করা দেখে ভাল লাগল।
— ওয়েবওয়ান্ডারার
3

এই উত্তরের আরও কার্যকর সংস্করণ :

 /**
 * Is element within visible region of a scrollable container
 * @param {HTMLElement} el - element to test
 * @returns {boolean} true if within visible region, otherwise false
 */
 function isScrolledIntoView(el) {
      var rect = el.getBoundingClientRect();
      return (rect.top >= 0) && (rect.bottom <= window.innerHeight);
 }
— জন দোহার্টি
সূত্র
2

উপাদানটির কোনও অংশ পৃষ্ঠাতে দৃশ্যমান হলে এই পদ্ধতিটি সত্য হবে। এটি আমার ক্ষেত্রে আরও ভাল কাজ করেছে এবং অন্য কাউকে সাহায্য করতে পারে।

function isOnScreen(element) {
  var elementOffsetTop = element.offset().top;
  var elementHeight = element.height();

  var screenScrollTop = $(window).scrollTop();
  var screenHeight = $(window).height();

  var scrollIsAboveElement = elementOffsetTop + elementHeight - screenScrollTop >= 0;
  var elementIsVisibleOnScreen = screenScrollTop + screenHeight - elementOffsetTop >= 0;

  return scrollIsAboveElement && elementIsVisibleOnScreen;
}
— রাফায়েল গার্সিয়া
সূত্র
2

স্ক্রোলযোগ্য ডিভ (ধারক) এর জন্য সাধারণ পরিবর্তন

var isScrolledIntoView = function(elem, container) {
    var containerHeight = $(container).height();
    var elemTop = $(elem).position().top;
    var elemBottom = elemTop + $(elem).height();
    return (elemBottom > 0 && elemTop < containerHeight);
}

দ্রষ্টব্য: উপাদানটি স্ক্রোলযোগ্য ডিভের চেয়ে বড় হলে এটি কাজ করে না।

— ডেরিক জে উইপ্পলার
সূত্র
2

আমি এই সংক্ষিপ্ত jQuery ফাংশন এক্সটেনশনটি অভিযোজিত করেছি, যা আপনি নির্দ্বিধায় (এমআইটি লাইসেন্স) বোধ করতে পারেন।

/**
 * returns true if an element is visible, with decent performance
 * @param [scope] scope of the render-window instance; default: window
 * @returns {boolean}
 */
jQuery.fn.isOnScreen = function(scope){
    var element = this;
    if(!element){
        return;
    }
    var target = $(element);
    if(target.is(':visible') == false){
        return false;
    }
    scope = $(scope || window);
    var top = scope.scrollTop();
    var bot = top + scope.height();
    var elTop = target.offset().top;
    var elBot = elTop + target.height();

    return ((elBot <= bot) && (elTop >= top));
};
— লরেঞ্জ লো সৌর
সূত্র
2

আমি টাস্কের জন্য একটি উপাদান লিখেছি , অত্যন্ত দ্রুত সংখ্যক উপাদান হ্যান্ডেল করার জন্য ডিজাইন করেছি ( একটি ধীর মোবাইলে 1000 উপাদানগুলির জন্য <10 মিমি সুর )।

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

একটি বিশাল, বেশিরভাগ স্বয়ংক্রিয়ভাবে উত্পন্ন পরীক্ষা স্যুট নিশ্চিত করে যে এটি বিজ্ঞাপন দেওয়া, ক্রস ব্রাউজার হিসাবে কাজ করে ।

আপনি যদি পছন্দ করেন তবে একটি শট দিন: jQuery.isInView । অন্যথায়, আপনি উত্স কোড অনুপ্রেরণা খুঁজে পেতে পারেন, যেমন এখানে ।

— hashchange
সূত্র
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.