bumbing when content not fully loaded

[anneklappe]

I am using Scroll Booster for an image slideshow. I noticed that Scroll Booster bumps, if the images were not fully loaded at the time I start scrolling.

So basically, I load the website only shortly, start scrolling > bug
If I load the website and wait a while before I start scrolling > I can scroll till the end.

<script type="text/javascript">
			jQuery(document).ready(function( $ ){
				let viewport = document.querySelector('#photo_slider')
				let content = viewport.querySelector('.photos')

				let sb = new ScrollBooster({
				  viewport,
				  content,
				  mode: 'x',
				  onUpdate: (data)=> {
					viewport.scrollLeft = data.position.x
				  }
				})
			});
</script>

Please find here the example I am working on. It would be great to get some support on this:
http://boenemann.com/photo/ukraine/

[fluxxus]

@anneklappe I think I am in the same boat as you. But from what I understand, it is not 100% tied to images being fully loaded.

For example, I opened your link for the first time and I could scroll till the end. It is completely random, at least in my case.

Sometimes it works, sometimes it doesn't.

Did you maybe fixed it somehow since I see that you can scroll till the end on your site?

[anneklappe]

Hi @madebym,

In the end, I am not using Scroll Booster as I wasn't able to figure this out.

Instead I integrated a simple horizontal scrolling section, basically a div/section with a width of 100vw, and a margin-left: calc(-50vw + 50%). Also, I have reduced the image size to nothing bigger than exactly needed.

I hope, this was helpful, let me know if you have further questions.

[fluxxus]

@anneklappe Thanks for taking the time to reply!

It crossed my mind that you are not using the library anymore since there is no momentum scroll and the horizontal bar is present on your site.

Actually, for a short time I thought that I found a way for the issue, by updating the metrics after images were loaded. And now it works in let's say 80% of the time, but I can't put that in production when the site goes live.

Too bad cause the library provided exactly what I need with a small footprint. I am aware there are other options out there, but aside from heavy carousel/slider libraries like Swiper/Slick I didn't find a suitable drag & scroll library that worked like Scroll Booster. All of the ones I tried had some quirks and bugs.

As for your scrolling section, I think you can enhance it with CSS scroll-snap. There are also pollyfils available. That should make it more smoother without the need for something like Scroll Booster :)

[byman64]

I had the same issue and I fixed it with the following way

// check if an id is available...it arrives from an ajax call
runIfDomExists("#box1", function checkIfDomExists(e) {                     
                scrollBox();           
 });


// + Check if an element exists and run the funtion until it will be available
function runIfDomExists(pElement, callBack, pInterval = 200) {
    myDebug(pElement + "->Checking...");
    var checkExist = setInterval(function() {
        var e = document.querySelectorAll(pElement);
        if (e.length) {            
            callBack(e);
            clearInterval(checkExist);
        }
    }, pInterval); // check every [ n ] ms
}

[karolsitarz]

I also experienced the very same problem. A quick fix is updating the ScrollBooster instance on the first interaction, when usually everything's loaded.

const viewport = document.querySelector(''); // your scroll selector
const sb = new ScrollBooster({
  viewport,
  onUpdate: e => {/* your scroll logic */}
});

viewport.addEventListener(
    'pointerdown',
    e => sb.updateMetrics(),
    { once: true }
);

[ilyashubin]

Hello! In version 2 there is support for images loading in scrollable area, so metrics area updated automatically. If scrollable area contains some other content that changes its size dynamically, you should handle these cases in your code by using updateMetrics method after content changes its size