Sola doğru sola kaydırdığınızda yanıp sönmeyi nasıl önleyebilirim?

Question

Son kez this kind of question'u sordum, ancak bu yanıtlardan daha iyi bir çözüm bulamıyorum.

Denedim ve yaptım. Kaydırma noktasına 500 ila 600 te ulaşıldığında, önceki div etiketinin kapımdan ayrıldığı ve sağ taraftaki yeni div etiketinin eklendiği zaman.

Ancak, bloklar silindikten sonra, ekleme ve sol konum değiştikten sonra kapsayıcıya kaydırma sorunu var. Komut dizimde, scrolleft:100 numaralı noktada sol tarafa doğru kaydırma yaparak, bu süre yanıp sönüyordu. Sol tarafa zorla ilerlerken yanıp sönmeyi nasıl durdurabilirim? jsfiddle

Answer 1

Sorunuzdan tam olarak ne aradığınızı söylemek zor. Tembel yüklü görüntülerle sonsuz yatay kaydırma istediğinizi farz ediyorum.

Onlara geri dönmek istemediğiniz sürece görüntüleri kaldırmanın bir nedeni olacağını düşünmüyorum. İlk görüntü genişliğini bilmiyorsanız, kaydırma yaparken kaydırma çubuğunun genişliğini dinamik olarak değiştirebilirsiniz, ancak kaydırma konumunu da ayarlamanız gerekir. İşte

bir kod pasajı göstermek:

$(function() { 
 

 
    var scrollContainer = $("#container"); 
 
    var scrollContents = $("#scroll-contents"); 
 
    var colors = ['rgba(143, 146, 199, 0.49)', 'rgba(199, 143, 186, 0.49)', 'rgba(149, 199, 143, 0.49)', 'rgba(229, 86, 61, 0.49)', 
 
     'rgba(212, 229, 61, 0.49)', 'rgba(206, 61, 229, 0.49)', 'rgba(229, 157, 61, 0.49)', 'rgba(61, 165, 229, 0.49)', 'rgba(61, 229, 133, 0.49)', 
 
     'rgba(229, 61, 61, 0.49)', 'rgba(116, 61, 229, 0.49', 'rgba(218, 229, 61, 0.49)', 'rgba(21, 43, 157, 0.49)', 'rgba(153, 157, 21, 0.49)', 'rgba(199, 143, 186, 0.49)', 
 
     'rgba(149, 199, 143, 0.49)', 'rgba(229, 86, 61, 0.49)', 'rgba(212, 229, 61, 0.49)', 'rgba(206, 61, 229, 0.49)', 'rgba(229, 157, 61, 0.49)', 'rgba(61, 165, 229, 0.49)', 
 
     'rgba(61, 229, 133, 0.49)', 'rgba(229, 61, 61, 0.49)', 'rgba(116, 61, 229, 0.49', 'rgba(218, 229, 61, 0.49)', 'rgba(21, 43, 157, 0.49)', 'rgba(153, 157, 21, 0.49)', 
 
     'rgba(199, 143, 186, 0.49)', 'rgba(149, 199, 143, 0.49)', 'rgba(143, 146, 199, 0.49)', 'rgba(199, 143, 186, 0.49)', 'rgba(149, 199, 143, 0.49)', 'rgba(229, 86, 61, 0.49)', 
 
     'rgba(212, 229, 61, 0.49)', 'rgba(206, 61, 229, 0.49)', 'rgba(229, 157, 61, 0.49)', 'rgba(61, 165, 229, 0.49)', 'rgba(61, 229, 133, 0.49)', 'rgba(229, 61, 61, 0.49)', 
 
     'rgba(116, 61, 229, 0.49', 'rgba(218, 229, 61, 0.49)', 'rgba(21, 43, 157, 0.49)', 'rgba(153, 157, 21, 0.49)', 'rgba(199, 143, 186, 0.49)', 'rgba(149, 199, 143, 0.49)', 
 
     'rgba(229, 86, 61, 0.49)', 'rgba(212, 229, 61, 0.49)', 'rgba(206, 61, 229, 0.49)', 'rgba(229, 157, 61, 0.49)', 'rgba(61, 165, 229, 0.49)', 'rgba(61, 229, 133, 0.49)', 
 
     'rgba(229, 61, 61, 0.49)', 'rgba(116, 61, 229, 0.49', 'rgba(218, 229, 61, 0.49)', 'rgba(21, 43, 157, 0.49)', 'rgba(153, 157, 21, 0.49)', 'rgba(199, 143, 186, 0.49)', 
 
     'rgba(149, 199, 143, 0.49)' 
 
    ]; 
 

 
    function addBlock(blockNum) { 
 
     scrollContents.append('<div class="block block' + blockNum + '" style="background:' + colors[blockNum] + '"><h4>' + (blockNum + 1) + '</h4></div>'); 
 
     document.getElementById('cont').innerHTML = blockNum + 1; 
 
    } 
 

 
    var totalBlocks = colors.length; 
 
    var numBlocks = 6; 
 

 
    scrollContents.width(totalBlocks * 400); 
 

 
    for (var iBlock = 0; iBlock < numBlocks; iBlock++) { 
 
     addBlock(iBlock); 
 
    } 
 

 
    scrollContainer.scroll(function() { 
 
     if (numBlocks != totalBlocks && (scrollContainer[0].scrollLeft > (numBlocks - 5) * 400)) { 
 
     addBlock(++numBlocks); 
 
     } 
 
    }); 
 

 
    });

#container { 
 
    width: 100%; 
 
    height: 350px; 
 
    position: relative; 
 
    overflow: scroll; 
 
    background: white; 
 
    top: 50px; 
 
    overflow: hidden; 
 
} 
 
.block { 
 
    display: inline-block; 
 
    width: 400px; 
 
    height: 350px; 
 
} 
 
#scroll-contents { 
 
    height: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://rawgit.com/asvd/dragscroll/master/dragscroll.js"></script> 
 

 
<body> 
 
    <div id="container" class="dragscroll"> 
 
    <div id="scroll-contents"> 
 
    </div> 
 
    </div> 
 
    <div id="cont" style="margin-top:150px; background:blue; height:20px; width:50px; color:white;"> 
 
    </div> 
 
</body>