search

Difegue / LANraragi

Web application for archival and reading of manga/doujinshi. Lightweight and Docker-ready for NAS/servers.
https://lrr.tvc-16.science
MIT License
2.26k stars 160 forks source link

Add Scroll Snap for infinite scroll & single page view #743

Open Asinin3 opened 1 year ago

Asinin3 commented 1 year ago

Rather than have users trying to precisely scroll-down to the bottom of an image to ensure they keep as much of the image on-screen, without the next image showing (infinite scroll) or LRR's navigation/text (single page view). We could avoid that entirely by implementing this: https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-type

The demo at the bottom of the page showcases how proximity scroll is possible through CSS, and I think it would be a great addition. Ideally set a proximity of around 20% of the top and bottom of an image to avoid people over/undershooting. Would also help with one-handed usage ( ͡° ͜ʖ ͡°)

Difegue commented 1 year ago

I briefly tried toying with this in infinite scroll by adding scroll-snap-type: y proximity in body.infinite-scroll #display but didn't see any changes - I might be missing something? PRs on this welcome.