HIDE SCROLLBAR, BUT STILL SCROLLABLE (USING CSS)

Posted by: wahoj95751 on 12 July 2022, 10:03 pm EST

  • Posted 12 July 2022, 10:03 pm EST

    I made a post about this topic by using javascript on mouse wheel event, then by calculating delta status we can trigger function that performs scroll up/down via window.scrollTo object. Use layer element. This is a neat technique since we can adjust layer positions = top, left, and.. right to [url=https://codeprozone.com/code/css/41115/hide-scroll-bar-when-not-needed.html]hide the scroll bar[/url] when not needed. Actually, it’s a good technique, I use it since 2007, but the challenges are:
    https://codeprozone.com/code/css/41115/hide-scroll-bar-when-not-needed.html

    – different delta calculations for different browser

    – need a decent function to perform a good/realistic mouse scroll up/down response.I found somewhere on the internet the other technique, using CSS. Fewer codes, cross-browser, and use the native mouse scrolling feature, here are the codes

    <html> <head> <style> html, body { padding: 0; margin: 0; overflow: hidden; } #container { position: absolute; left: 0; top: 0; right: -30px; bottom: 0; padding-right: 15px; overflow-y: scroll; } </style> </head> <body> <div id="container"> <!-- lines, lines, lines --> </div> </body> </html>
    How it works:1. Kill HTML and body scrollbar (hidden overflow)2. The scrollbar mostly has 30px width. -30px means adding more 30px to the right, the layer’s scrollbar will be invisible to the user.3. Enable the layer’s scrollbar (overflow-y: scroll)Hope it works for you
Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels