මම AJAX හරහා මූලද්‍රව්‍ය පටවනවා. ඒවායින් සමහරක් දෘශ්‍ය වන්නේ ඔබ පිටුව පහළට අනුචලනය කළහොත් පමණි. දැන් පිටුවේ දෘශ්‍යමාන කොටසේ මූලද්‍රව්‍යයක් තිබේදැයි මට දැනගත හැකි ක්‍රමයක් තිබේද?

මෙය කළ යුත්තේ:

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

වැනිලා හි මෙම පිළිතුර :

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

යාවත්කාලීන කිරීම: IntersectionObserver භාවිතා කරන්න

මම මෙතෙක් සොයාගෙන ඇති හොඳම ක්‍රමය වන්නේ jQuery දර්ශණය වන ප්ලගිනයයි . චාම් එකක් වගේ වැඩ කරනවා.

අභිරුචි "දර්ශණය" සිදුවීමක් අනුකරණය කරයි, එය මූලද්‍රව්‍යයක් දර්ශනයට අනුචලනය වන විට හෝ පරිශීලකයාට පෙනෙන විට වෙඩි තබයි.

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

සැඟවී ඇති හෝ නැරඹිය හැකි ප්‍රදේශයෙන් පිටත අන්තර්ගතය සඳහා අනවශ්‍ය ඉල්ලීම් වලක්වා ගැනීමට මෙම ප්ලගිනය භාවිතා කළ හැකිය.

මෙන්න මගේ පිරිසිදු ජාවාස්ක්‍රිප්ට් විසඳුම එය අනුචලනය කළ හැකි බහාලුමක් තුළ සඟවා තිබේ නම් ක්‍රියා කරයි.

මෙහි නිරූපණය කරන්න (කවුළුව නැවත වෙනස් කිරීමට උත්සාහ කරන්න)

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: තිරයට ඉහළින් අනුචලනය වන විට හැසිරවීමට යාවත්කාලීන කරන ලදි.

IntersectionObserver භාවිතා කිරීම API (නවීන බ්රවුසරයන් ස්වදේශික)

නිරීක්ෂකයෙකු භාවිතා කිරීමෙන් මූලද්‍රව්‍යයක් දර්ශන තලයේ හෝ අනුචලනය කළ හැකි බහාලුමක දැකිය හැකිද යන්න තීරණය කිරීම පහසු සහ කාර්යක්ෂම වේ .

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>

බ්‍රව්සර් ආධාරක වගුව බලන්න (IE / Safari හි සහය නොදක්වයි)

jQuery වේපොයින්ට්ස් ප්ලගිනය මෙහි ඉතා හොඳයි.

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

ප්ලගිනයේ අඩවියේ උදාහරණ කිහිපයක් තිබේ .

කොහොමද

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

මූලද්‍රව්‍යය මේ ආකාරයෙන් බැලූ විට ඔබට අවශ්‍ය ඕනෑම දෙයක් අවුලුවාලිය හැකිය

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

ඒක මට වැඩක්

මගේ අවශ්‍යතාවය සඳහා ට්වීක් ස්කොට් ඩවුඩින්ගේ සිසිල් ක්‍රියාකාරිත්වය- මෙය මූලද්‍රව්‍යය තිරයට අනුචලනය වී ඇත්දැයි සොයා බැලීම සඳහා භාවිතා කරයි.

function isScrolledIntoView(elem)
{
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();
    var elemTop = $(elem).offset().top;
    return ((elemTop <= docViewBottom) && (elemTop >= docViewTop));
}

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

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);
var isVisible = isScrolledIntoView(el, holder);

isScrolledIntoView ඉතා අත්‍යවශ්‍ය කාර්යයකි, එබැවින් මම එය අත්හදා බැලුවෙමි, එය ක්‍රියාකරන්නේ දර්ශනපත්‍රයට වඩා බර නොවන මූලද්‍රව්‍ය සඳහා ය, නමුත් මූලද්‍රව්‍යය දර්ශනපත්‍රයට වඩා විශාල නම් එය ක්‍රියා නොකරයි. මෙය නිවැරදි කිරීම සඳහා තත්වය පහසුවෙන් වෙනස් කරන්න

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

මේ සඳහා:

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

මෙහි නිරූපණය බලන්න: http://jsfiddle.net/RRSmQ/

මෙහි ඇති බොහෝ පිළිතුරු, මූලද්‍රව්‍යයක් සැඟවිය හැකි බව සැලකිල්ලට නොගන්නේ එය මුළු පිටුවේම පමණක් නොව, ඩිවි එකකින් නොපෙනී යන බැවිනි.

එම හැකියාව ආවරණය කිරීම සඳහා, මූලික වශයෙන් එහි එක් එක් දෙමව්පියන්ගේ සීමාවන් තුළ මූලද්‍රව්‍යය ස්ථානගත වී ඇත්දැයි පරීක්ෂා කළ යුතුය.

මෙම විසඳුම හරියටම එය කරයි:

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 හි පුද්ගලිකව පරීක්ෂා කළෙමි.

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

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>

එය JSFiddle හි බලන්න

මූලද්‍රව්‍යයේ ඇති ඕනෑම පැඩිං, මායිම් හෝ ආන්තිකය මෙන්ම දර්ශනපත්‍රයට වඩා විශාල මූලද්‍රව්‍යයන් ද මෙය සලකයි.

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

මෙම විශිෂ්ට පිළිතුරෙන් බැහැරව , ඔබට 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

ඒ නිසා එය නම් සඟවන්න සඳහා ප්ලගිනය inview නව "inview" උත්සවය එකතු වන.

සිදුවීම් භාවිතා නොකරන 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/ ) ජේම්ස් නම් බ්ලොක් එකකින්

අනුචලනය කළ හැකි ඩීඅයිවී බහාලුම් තුළ ඇති මූලද්‍රව්‍යවල දෘශ්‍යතාව පරීක්ෂා කිරීමට මට අවශ්‍ය විය

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

ඔබ අනුචලනය කරන විට මූලද්‍රව්‍යය වර්තමාන දර්ශනපත්‍රයේ තිබේදැයි පරීක්ෂා කිරීමට ඔබට "onScreen" jquery ප්ලගිනය භාවිතා කළ හැකිය. ප්ලගිනය තේරීම් තිරයේ දිස්වන විට තේරීම්කරුගේ ": onScreen" සත්‍ය ලෙස සකසයි. ඔබේ ව්‍යාපෘතියට ඇතුළත් කළ හැකි ප්ලගිනය සඳහා සබැඳිය මෙයයි. " 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.
    }
});

HTML කේතය:

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

CSS:

#div1 {
    background-color: red;
}
#div2 {
    background-color: green;
}

මගේ යෙදුමේ එවැනි ක්‍රමයක් මා සතුව ඇත, නමුත් එය 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 අනුවාදය). FF සමඟ අනුකූල වීම සඳහා අදහස් කියවන්න.

වෙනත් අංශයක් තුළ අයිතමය අනුචලනය කිරීම සඳහා ඔබට මෙය වෙනස් කිරීමට අවශ්‍ය නම්,

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

පිළිගත් පිළිතුර වෙනස් කරන ලද අතර එමඟින් මූලද්‍රව්‍යයට එහි දර්ශන දේපල දෘශ්‍යමාන තත්ත්වයට “කිසිවක්” හැර වෙනත් දෙයකට සකසා තිබිය යුතුය.

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

තිරස්, සිරස් හෝ දෙකෙහිම මූටූල්ස් භාවිතා කරමින් එකම දේ සාක්ෂාත් කර ගැනීමේ ක්‍රමයක් මෙන්න.

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

මූලද්‍රව්‍යයක් 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;
}

මෙම ප්‍රශ්නයට පිළිතුරු 30 කට වඩා ඇති අතර, ඒ කිසිවක් මා භාවිතා කර ඇති පුදුමාකාර සරල, පිරිසිදු JS විසඳුම භාවිතා නොකරයි. තවත් බොහෝ අය තල්ලු කරමින් සිටින බැවින් මෙය විසඳීම සඳහා jQuery පැටවීම අවශ්‍ය නොවේ.

මූලද්‍රව්‍යය දර්ශනපත්‍රය තුළ තිබේදැයි පැවසීමට නම්, අපි මුලින්ම ශරීරය තුළ ඇති මූලද්‍රව්‍ය පිහිටීම තීරණය කළ යුතුය. මා වරක් සිතූ පරිදි මෙය පුනරාවර්තව කිරීමට අපට අවශ්‍ය නැත. ඒ වෙනුවට, අපට භාවිතා කළ හැකිය element.getBoundingClientRect().

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

මෙම අගය වස්තුවේ ඉහළ කොටස සහ ශරීරයේ ඉහළ කොටස අතර Y වෙනස වේ.

මූලද්රව්යය දෘෂ්ටියේ තිබේදැයි අපි පසුව පැවසිය යුතුය. බොහෝ ක්‍රියාත්මක කිරීම් අසන්නේ සම්පූර්ණ අංගය දර්ශනපත්‍රය තුළ තිබේද යන්නයි, එබැවින් අපි ආවරණය කළ යුත්තේ මෙයයි.

පළමුවෙන්ම, කවුළුවේ ඉහළ පිහිටීම : 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() ක්‍රමය . මෙම ක්‍රමය දීර් time කාලයක් තිස්සේ පැවතුන බැවින් ඔබගේ බ්‍රව්සරය එයට සහාය නොදැක්වීම ගැන කරදර විය යුතු නැත.

දැන්, අපගේ මූලද්රව්යයේ ඉහළම ස්ථානය:

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 ඔබේ මූලද්‍රව්‍යය මත පන්තියක් කළ හැකි අතර, පසුව ඔබේ CSS හි සංක්‍රාන්ති බලපෑම් සමඟ හැසිරවිය හැකිය.

මම වෙනත් තැනක මෙම විසඳුම සොයා නොගැනීම ගැන මම පුදුම වෙමි, නමුත් මෙය වඩාත්ම පිරිසිදු හා effective ලදායී විසඳුම බව මම විශ්වාස කරමි, තවද ඔබට jQuery පැටවීම අවශ්‍ය නොවේ!

මෙම පිළිතුරේ වඩාත් කාර්යක්ෂම අනුවාදය :

 /**
 * 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);
 }

පිටුවේ මූලද්‍රව්‍යයේ කිසියම් කොටසක් දැකිය හැකි නම් මෙම ක්‍රමය සත්‍ය වේ. එය මගේ නඩුවේ වඩා හොඳින් ක්‍රියාත්මක වූ අතර වෙනත් කෙනෙකුට උදව් විය හැකිය.

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

අනුචලනය කළ හැකි div (බහාලුම්) සඳහා සරල වෙනස් කිරීම

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

සටහන: අනුචලනය කළ හැකි අංශයට වඩා මූලද්‍රව්‍යය විශාල නම් මෙය ක්‍රියා නොකරයි.

ඔබට මෙම නිදහස් jQuery ක්‍රියාකාරී දිගුව අනුවර්තනය කරන ලදි, එය ඔබට භාවිතා කිරීමට නිදහස ඇත (MIT බලපත්‍රය).

/**
 * 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));
};

මා විසින් කාර්යය සඳහා සංරචකයක් ලියා ඇති අතර, මූලද්‍රව්‍ය විශාල සංඛ්‍යාවක් ඉතා වේගයෙන් හැසිරවීමට නිර්මාණය කර ඇත ( මන්දගාමී ජංගම දුරකථනයක මූලද්‍රව්‍ය 1000 ක් සඳහා <10ms දක්වා ).

කවුළුව, HTML අංග, කාවැද්දූ iframe, පැටව් ගසා දරුවා කවුළුව - - එය (හඳුනාගන්නා දේ ගැන ඉතා නම්යශීලී වේ එය ඔබ වෙත ප්රවේශ අනුචලන රුවනයකි සෑම වර්ගය සමග ක්රියාත්මක වන පූර්ණ හෝ අර්ධ සැඟවීම් , දේශ සීමා කොටුව හෝ අන්තර්ගත කොටුව , අභිරුචි ඉවසීම කලාපය , ආදිය ).

විශාල, බොහෝ දුරට ස්වයංක්‍රීයව ජනනය කරන ලද පරීක්ෂණ කට්ටලයක් එය ප්‍රචාරණය කළ හරස් බ්‍රව්සරයක් ලෙස ක්‍රියා කරන බව සහතික කරයි .

ඔබ කැමති නම් එයට පහරක් දෙන්න: jQuery.isInView . එසේ නැත්නම්, ඔබ ආශ්වාදයක් වූ මූල ෙක්ත, උදා: ඔබට සිතෙන්න පුළුවන් මෙතන .