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.03k stars 118 forks source link

Vertical scrolling behavior is not as expected #90

Open wb027 opened 3 years ago

wb027 commented 3 years ago

This is a very interesting project! I was pleased to put a star on the github. Especially like the built-in dark theme and no jquery dependency. I used halfmoon on one temporary site for a contest. It turned out quite well. However, I see two big drawbacks that will prevent me from using this in persistent projects.

  1. After loading the page on the computer, vertical scrolling with the keys does not work. It is necessary to set the focus with the mouse on the content, only then scrolling will work.
  2. On Chrome mobile, the top bar of the browser is not hidden when scrolling down. It wastes space on the small screen and is bad.

I haven't found how to fix this myself. Maybe there is a solution?

halfmoonui commented 3 years ago

Thank you. Regarding your issues:

  1. This has been brought up before. The way that pages are structured is a bit weird (basically the content wrapper scrolls, not the body of the DOM), but I have that on the roadmap and this should be fixed in the next update.
  2. Do you mean the navbar? If yes, then that is by design. If you want a static navbar, you can check out this: https://www.gethalfmoon.com/docs/navbar/#static-navbars
wb027 commented 3 years ago

I have that on the roadmap and this should be fixed in the next update

This is good news, I'll be waiting.

Do you mean the navbar?

Screenshot_20210221-073357

If you want a static navbar, you can check out this: https://www.gethalfmoon.com/docs/navbar/#static-navbars

Thanks, I've already read this.

wb027 commented 3 years ago

I tried setting focus to .content-wrapper to simulate a ~mouse click~ get focus event: code 2021-02-21 10-59-59 (sorry, it was not possible to insert this code normally) But this only worked in Firefox. This live hack does not work in Chromium and Falcon (web-kit based browser).

(upd) And (suddenly!) It works in IE11. )))

(upd2) Simulated mouse click doesn't work anywhere. let event = new Event("click"); elem.dispatchEvent(event);

Any ideas for a live hack?