CODEWITHSUNDEEP
javascriptangularimage
Rohith Murali
Rohith Murali

Reputation: 5669

Scroll is not smooth for image listing web page

I am trying to create an image listing website in angular like the google photos. I have a custom scrollbar which lists the month and year. When user moves the scroll thumb, the image list should scroll. I have written,

scrollContainer = document.getElementById("photosContainer");
scrollContainer.scrollTop += 20;

and the mousemove event will fire the above code. There are about 5000 img tags and for testing purpose the src is just an avatar icon hardcoded. So no changes happen to the image when it is scrolled.

 onmousemove(){
  this.scrollThumbPosition = <value>;
}

This will move the scrollbar thumb. The scrollbar and everything works fine if there are upto a 1000 images.But when there are more than 1000 images,

  1. Scroll thumb wont move when dragged.
  2. The image list wont move.

But when the mouseup action is triggered the Ui responds. Is there a way to smoothen the performance of the page with huge number of image tags?

Upvotes: 0

Views: 283

Answers (1)

Kurt Hamilton
Kurt Hamilton

Reputation: 13515

Have you tried a simple CSS solution? (Edit: added will-change: scroll-position thanks to lucifer63).

html {
  scroll-behavior: smooth;
  will-change: scroll-position;
}

scroll-behavior: smooth politely asks the browser to smooth out automated scrolling (i.e. not user scrolling)

will-change: scroll-position lets the browser know where a performance hit is expected. It is only intended as a last resort if you are still seeing issues.

Edit:

Or if you want a pure JS approach, you can use the window.scroll() fuction:

window.scrollBy({ 
  top: 20,
  left: 0, 
  behavior: 'smooth' 
});

``

Upvotes: 1

Related Questions