9

Last time I asked this kind of question,but i don't find a better solution from these answers.

I tried and do it. when the scroll postion was reached at te point 500 to 600 that time previous div tag was detach from my container and new div tag was append on the right side.

But i have a problem of scrollLeft to the container, after the blocks are deleting , appending and left position changing. In my script forcely scroll to the left side at the point scrolleft:100 that time blinking was appear. How can i stop the blinking when forcly scroll to the left side.? jsfiddle

Community
  • 1
  • 1
  • 2
    There is no scrolling effect in your jsfiddle. Can you post a link to the page that you are working on, or to a barebones page where the issue is visible? – James Newton May 28 '15 at 09:20
  • @JamesNewton Dragscroll are used in my script. In my browser dragscroll was work But i do no how to add the library file of the drag scroll in jsfiddle –  May 28 '15 at 09:24
  • Is dragScroll a github project? Use this to add it to the fiddle: http://stackoverflow.com/a/24548325/2902116 – bluelDe May 28 '15 at 11:51
  • You are forcing a layout calculation multiple times by doing it that way. Removing an element from the left makes the elements on the right have to "fill the gap" immediately (the dimensions calculation at a minimum), then you also use change the `left` CSS property which also causes layout. Layout is the most expensive rendering step. You could avoid it by using a `transform` and `opacity` change instead of `left` and removing the element. – Deryck May 30 '15 at 13:32

1 Answers1

6

It's difficult to tell from your question exactly what you are looking for. I am assuming that you want an infinite horizontal scroll with lazy-loaded images.

I don't think that there would be a reason to remove images unless you never want to scroll back to them. If you don't know the initial image widths, you can dynamically change the width of the scroller as you scroll, but you will need to adjust the scroll position as well.

Here is a code-snippet to illustrate:

  $(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>
brenzy
  • 1,976
  • 11
  • 20