0

I have come across an annoying aspect of building web apps -- scrollbars affect the width of elements and therefore affect the positioning of borders, etc.

Apparently Macs have an option in System Preferences --> General (for "show scroll bars") called "Automatically based on mouse or trackpad" and another option called "always".

The choice that the user makes here can affect the layout of my web app, and it is entirely outside of my control

Also, the scrollbars that appear based on the mouse and trackpad hover over the content instead of actually affecting the width of the HTML elements, and this has a big impact on the layout of the site, obviously.

One option is to set the following CSS:

* {
    -ms-overflow-style: none;
}

This will allow scrolling but prevent the scrollbars from being shown, but it only affects IE.

I can install this extension for Chrome (called "No Scrollbars Please"): https://chrome.google.com/webstore/detail/no-scroll-bars-please/ahnbemfjhoibkhlijfbbjdjafbmhimdn/related?hl=en but I don't necessarily want to force my users to intall a third-party extension I have no connection with and in addition I don't want to affect scrollbars on other websites by recommending this option.

What can I do? I want the solution to work on all browser-OS combinations.

tadasajon
  • 14,276
  • 29
  • 92
  • 144
  • 1
    possible duplicate of [Hide scroll bar, but still being able to scroll](http://stackoverflow.com/questions/16670931/hide-scroll-bar-but-still-being-able-to-scroll) – Cheslab Aug 15 '15 at 16:32

2 Answers2

0

Hellooverflow: auto;`

CSS:

*{margin:0;}
#container1{
    height: 100%;
    width: 100%;
    border: 1px solid green;
    overflow: hidden;
}

#container2{
    width: 100%;
    height: 99%;
    border: 1px solid blue;
    overflow: auto;
    padding-right: 15px;
}

html, body{
    height: 99%;
    border: 1px solid red;
    overflow:hidden;
}

HTML:

<div id="container1"><div id="container2">
    hello<br/>I<br/>am<br/>here<br/>
    hello<br/>I<br/>am<br/>here<br/>
    hello<br/>I<br/>am<br/>here<br/>
    hello<br/>I<br/>am<br/>here<br/>
    hello<br/>I<br/>am<br/>here<br/>
    hello<br/>I<br/>am<br/>here<br/>
    hello<br/>I<br/>am<br/>here<br/>
    hello<br/>I<br/>am<br/>here<br/>
    hello<br/>I<br/>am<br/>here<br/>
    hello<br/>I<br/>am<br/>here<br/>
    hello<br/>I<br/>am<br/>here<br/>
    hello<br/>I<br/>am<br/>here<br/>
    hello<br/>I<br/>am<br/>here<br/>
    hello<br/>I<br/>am<br/>here<br/>
    hello<br/>I<br/>am<br/>here<br/>
    hello<br/>I<br/>am<br/>here<br/>
    hello<br/>I<br/>am<br/>here<br/>
    hello<br/>I<br/>am<br/>here<br/>
    hello<br/>I<br/>am<br/>here<br/>
    hello<br/>I<br/>am<br/>here<br/>
    hello<br/>I<br/>am<br/>here<br/>
    hello<br/>I<br/>am<br/>here<br/>
    hello<br/>I<br/>am<br/>here<br/>
    hello<br/>I<br/>am<br/>here<br/>
    hello<br/>I<br/>am<br/>here<br/>
    hello<br/>I<br/>am<br/>here<br/>
    hello<br/>I<br/>am<br/>here<br/>
    hello<br/>I<br/>am<br/>here<br/>
    hello<br/>I<br/>am<br/>here<br/>
    hello<br/>I<br/>am<br/>here<br/>
    hello<br/>I<br/>am<br/>here<br/>
    good<br/>bye.
</div><div>

Fiddle

pool pro
  • 2,084
  • 12
  • 21
0

On Webkit, you can use the following:

::-webkit-scrollbar {
    width: 0px;
}

For support of other browsers, you will have to use the previous answer.

Potassium Ion
  • 2,075
  • 1
  • 22
  • 39