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

Improve this question
4
  • 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? Commented May 28, 2015 at 9: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 Commented May 28, 2015 at 9:24
  • Is dragScroll a github project? Use this to add it to the fiddle: stackoverflow.com/a/24548325/2902116 Commented May 28, 2015 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. Commented May 30, 2015 at 13:32

1 Answer 1

Reset to default
6
+25

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>

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments