粘性邊緣 - 獲取單元格的邊緣，在旋轉木馬內

Question

我正在研究具有自定義旋轉木馬的應用程序，並且希望直觀地移動項目的內部內容，使其始終處於視圖中，直到項目爲止真正超出了範圍。

^以便將.item移到左側位置。你會使用什麼技術來檢測邊緣以動態定位.unit填充左值？因此，即使項目開始移出位置，該單元格內的文本也始終可見。

//最新小提琴 https://jsfiddle.net/atg5m6ym/3124/

$(document).ready(function() { 
    //console.log("ready!"); 

function isElementInViewport (el) { 

    //special bonus for those using jQuery 
    if (typeof jQuery === "function" && el instanceof jQuery) { 
     el = el[0]; 
    } 

    var rect = el.getBoundingClientRect(); 

    return (
     rect.top >= 0 && 
     rect.left >= 0 && 
     rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /*or $(window).height() */ 
     rect.right <= (window.innerWidth || document.documentElement.clientWidth) /*or $(window).width() */ 
    ); 
} 


    var currentPadding = 0; 
    var newPadd = 0; 

    function compensatePadding() { 
    var itemLeft = Math.abs(parseInt($('.caroseul').offset().left)); 
    console.log("itemLeft", itemLeft) 
    newPadd = Math.abs(itemLeft); 

    $('.stick .unit').css("padding-left", newPadd + "px"); 
    } 


    var unitWidth = $('.unit').width(); 
    console.log("unitWidth", unitWidth); 



    function onVisibilityChange(el, callback) { 
    var old_visible; 
    return function() { 
     var visible = isElementInViewport(el); 
     if (visible != old_visible) { 
     old_visible = visible; 
     if (typeof callback == 'function') { 
      callback(); 
     } 
     } 
    } 
    } 

    function checkVisible() { 
    console.log("checkvisible"); 

    var labelGroups = $('.caroseul .item .wraps'); 
    var length = labelGroups.length; 

    for (i = 0; i < length; i++) { 

     var isItemLabelInView = isElementInViewport(labelGroups[i]); 

     if(!isItemLabelInView){ 
     $(labelGroups[i]).closest(".item").addClass("stick"); 
     } 
     else{ 
     $(labelGroups[i]).closest(".item").removeClass("stick"); 

     //reset moved items 
     $('.unit').css("padding-left", 0); 
     } 

     console.log(" labelGroups[i]", labelGroups[i]); 
     console.log("isItemLabelInView", isItemLabelInView); 
    } 

    compensatePadding(); 
    } 



    $('.container').on('scroll', checkVisible); 

}); 

Answer 1

我調整了一下你的代碼 - 而不是檢查，如果標籤在視口中或不我已檢查標籤是否正在移出從左側的視口。

if ($(labelGroups[i]).offset().left < 0) { 
    $(labelGroups[i]).closest(".item").addClass("stick"); 
} else { 
    $(labelGroups[i]).closest(".item").removeClass("stick"); 

除了這個我已經增加了一些條件和compensatePadding()功能偏移值。

請參考fiddle。

Answer 2

使用jQuery這個讓我痛苦了一下，因爲我認爲你會使用requestAnimationFrame更好......但，回答您的具體問題，你可以使用這樣的事情（我專門留給兩個彙總值作爲單獨瓦爾爲了說明的一點）：

$(document).ready(function() { 
    function animateMe(){ 
    $(".item").animate({ 
     left: "-=5" 
    }, 1000, function() { 
     amountMovedLeft += 5; 
     if(amountMovedLeft >= amountUntilUnitHitsLeft){ 
     $(".unit").animate({ 
      right: "+=5" 
     } 
     } 
    }); 
    } 

    var amountMovedLeft = 0; 
    var unitWidthHalf = $('.unit').width()/2; 
    var itemWidthHalf = $('.item').width()/2; 
    var amountUntilUnitHitsLeft = itemWidthHalf - unitWidthHalf; 
    setInterval(function(){ 
    animateMe(); 
    }, 1000); 
});