I do not like the look of my browser's scrollbars on my website. To combat this, I had two ideas:
- Get rid of the scrollbars.
- Replace the default scrollbar with a custom one.
I am aware that I can use css to style the scrollbar, or hide it in webkit browsers, but I would like a more cross-browser solution. I think if I chose to hide the scrollbar, it would not affect the user experience, because of my navigation.
I have looked at several solutions (such as this one) which use a system of wrappers and css to hide the scrollbar and put it off the canvas. These do not work for me, because they interfere with the parallax.js and bootstrap affix/scrollspy navbar that my site is running. I think this is because both scripts depend on the body
element, and not a main wrapper, scrolling.
I have also looked into a jquery plugin to change the look of my scrollbar, specifically the malihu custom scrollbar. When I tried this, the scrollbar worked wonderfully, but the parallax and my scrollspy/affix navbar stopped working, for the same reasons above.
Does anyone have any ideas as to how I can go about this?