What techniques can be used to avoid blinking while forcefully scrolling to the left?

Question

What techniques can be used to avoid blinking while forcefully scrolling to the left?

In my previous inquiry about dynamically adding and removing divs on scroll, I was unable to find a satisfactory solution among the responses provided. However, I decided to take matters into my own hands and attempted to implement it myself.

My approach involved detaching the previous div tag from the container and appending a new div tag when the scroll position reached between 500 and 600. Despite successfully achieving this functionality, I encountered an issue with the scrollLeft property of the container. After deleting and appending blocks, the left position would change, causing a blinking effect when forcibly scrolling to the left at a set point of scrollleft:100.

How can I prevent this blinking effect when scrolling to the left side forcefully? Here is a link to the jsfiddle for reference.

javascript jquery html css

Answer 1

Answer №1

It seems like you are interested in implementing an infinite horizontal scroll with lazy-loaded images based on your question. If you want to achieve this functionality without removing images, you can dynamically adjust the width of the scroll container and handle the scroll position accordingly.

To demonstrate, here is a code snippet:

  $(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)',
      // Additional color values...
    ];

    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>

Answer 2

It seems like you are interested in implementing an infinite horizontal scroll with lazy-loaded images based on your question. If you want to achieve this functionality without removing images, you can dynamically adjust the width of the scroll container and handle the scroll position accordingly.

To demonstrate, here is a code snippet:

  $(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)',
      // Additional color values...
    ];

    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>

What techniques can be used to avoid blinking while forcefully scrolling to the left?

Answer №1

Similar questions

Receiving the error "Undefined chart type" when using $q.all with Google Chart API Promise

Aligning a child div within a parent div using HTML/CSS where the child div takes up 30% of the parent div and

Error: The function app.all is not defined

The unique identifier for a specific child element in Firefox

Using ui-grid to show cells as drop-down menus

Overlay with a progress bar that obscures visibility

Using string replacement for effective search finding: Unleashing the power of substring matching

Import objects into THREE.js using OBJLoader, convert to Geometry, apply transformations, and finally convert to BufferGeometry

Tips for sequentially arranging and rearranging an array of numbers, even when duplicates are present

How come JSON.parse is altering the data within nested arrays?

Having issues when dynamically adding options to a multiselect dropdown

Using PHP along with JQuery and AJAX to update the database when a Div element is hidden

An effective approach to automatically close an Expansion Panel in an Angular Mat when another one is opened

Transmitting keys and data from Sails.js to Angular via streaming

Unable to change the background color of h1 tag in a ReactJS project

Issue with NodeJS: The HTTP GET request is returning the code instead of the expected JSON object

What is the best way to show HTML code on a REACT website without disrupting the existing styles?

The rotation transformation on the Z-axis occurs once the animation has finished

Troubleshooting Key Press Issues with Bootstrap 5 Dropdown and Collapse Feature

Retrieving values of checked boxes in a table using JavaScript