search

halfmoonui / halfmoon

Halfmoon is a highly customizable, drop-in Bootstrap replacement. It comes with three built-in core themes, with dark mode support for all themes and components.
https://www.gethalfmoon.com
MIT License
3.04k stars 118 forks source link

JS: page y offset and custom scrollbar issue #49

Open ThaUnknown opened 4 years ago

ThaUnknown commented 4 years ago

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 commented 4 years ago

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

<a href="#"></a>
halfmoonui commented 4 years ago

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.

ThaUnknown commented 4 years ago

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 commented 3 years ago

@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

brayanduranvelasquez commented 2 years ago

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.

ThaUnknown commented 2 years ago

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