halfmoon icon indicating copy to clipboard operation
halfmoon copied to clipboard

JS: page y offset and custom scrollbar issue

Open ThaUnknown opened this issue 5 years ago • 6 comments

by default, the entire page is displayed in position absolute [html, body, page-wrapper], I'm guessing this was done in order to have a nicer display for scrollbars? this causes many issues with js like:

window.onscroll
window.pageYOffset
window.innerHeight

this can be worked around manually however it causes issues for existing scrollspy JS libraries, one solution could be to remove the position absolute and move the

 class="with-custom-webkit-scrollbars with-custom-css-scrollbars"

to the HTML tag instead of body and removing height and position from the .content-wrapper, body, html selectors, this would mostly solve the issue and remove the hacky workaround without majorly breaking anything

ThaUnknown avatar Sep 22 '20 00:09 ThaUnknown

this also fixes trying to scroll to the top of the page with

<a href="#"></a>

ThaUnknown avatar Sep 22 '20 01:09 ThaUnknown

Thanks a lot for bringing this up, and also suggesting the fixes. I think this will require some extensive cross-browser testing, because getting the scrolling right is obviously very important. I will report any possible issues I find on this thread.

However, if your fixes work as expected, I will quickly patch this and push out a new release as soon as possible.

halfmoonui avatar Sep 22 '20 13:09 halfmoonui

Thanks a lot for bringing this up, and also suggesting the fixes. I think this will require some extensive cross-browser testing, because getting the scrolling right is obviously very important. I will report any possible issues I find on this thread.

However, if your fixes work as expected, I will quickly patch this and push out a new release as soon as possible.

forgot to mention, you'd also need to remove position absolute and height from .page-wrapper

ThaUnknown avatar Sep 22 '20 14:09 ThaUnknown

@halfmoonui please look at this, it causes significant scrolling performance issues on heavy sites, you can easily observe this by enabling scrolling performance issues in rendering tab of chrome dev tools

ThaUnknown avatar Apr 20 '21 21:04 ThaUnknown

No se si estoy equivocado, ¿pero aun no se ha solucionado el problema del evento scroll? estoy intentando poder capturar con el evento scroll pero no me lo permite.

brayanduranvelasquez avatar Aug 23 '22 15:08 brayanduranvelasquez

No habla español

half-moon is dead, I made my own fork which fixed this and more bugs half-moon has, see: https://github.com/ThaUnknown/quartermoon

ThaUnknown avatar Aug 23 '22 16:08 ThaUnknown