Hide Scrollbar While Still Being Able to Scroll with Mouse/Keyboard

Hide scrollbar while still being able to scroll with mouse/keyboard

For future reference there is also a solution without jQuery - just have the wrapper div style contain overflow:hidden and use this JavaScript two-liner:

// get the width of the textarea minus scrollbar
var textareaWidth = document.getElementById("textarea").scrollWidth;

// width of our wrapper equals width of the inner part of the textarea
document.getElementById("wrapper").style.width = textareaWidth + "px";

See demo or complete HOWTO.

Update: you can use the same principle to create scrollable div without scrollbar: demo.

hide scrollbar but able to scroll with mouse

I'm not 100% sure on the browser compatibility of this, but you can have two div's - an outer div and a inner div. The inner div will have all your content. Your css could then look like this:

#outer {
    width: 200px;
    height: 200px;
    overflow:hidden;
}

#inner {
    height: 200px;
    width: 225px;
    overflow: scroll;
}

That is, the inner block would be wide enough to contain a scrollbar, but have it hidden from sight by the containing div. This worked for me in webkit. You might have to fiddle with the widths to make sure text doesn't get cut off.

That said, I would carefully think about WHY you're trying to do this. This could be a huge usability issue for your users, as they will not have any indication that there is more content within the div.

Hide the scrollbar but keep the ability to scroll with native feel

That is standard browser behavior.

Taking away scrollbar reduces user-friendliness.

---

You can set scrollbar to stay visible all the time with css.

CSS:

body {
    overflow-y: scroll;
}

Hide vertical scrollbar, keep horizontal and still able to scroll

You can use -webkit-scrollbar, but you need to use width and height instead of display: none

div {  width: 100px;  height: 100px;  font-size: 48px;    overflow: auto;}
::-webkit-scrollbar {  height: 0px;  width: 8px;  border: 1px solid #fff;}
::-webkit-scrollbar-track {  border-radius: 0;  background: #eeeeee;}
::-webkit-scrollbar-thumb {  border-radius: 0;  background: #b0b0b0;}

<div>Lorem ipsum dolor sit amet.</div>
Shift scroll to move horizontally

Scrolling with hiding scroll bar

Just style the scroll bar, not the elements.

::-webkit-scrollbar,::-webkit-scrollbar-button,::-webkit-scrollbar-track,::-webkit-scrollbar-track-piece,::-webkit-scrollbar-thumb,::-webkit-scrollbar-corner,::-webkit-resizer
{opacity:0; }

More info here: http://css-tricks.com/custom-scrollbars-in-webkit/.

can't hide scrollbar when using overflow: auto

Create an inner div: http://jsfiddle.net/sp95S/1/

.div {
    background-color: red;
    position: relative;
    height: 214px;
    overflow: hidden;
    width: 452px;
    margin: 0px auto;
}
#inner{
    width: 100%;
    overflow: auto;
    height: 100%;
    padding-right: 15px;
}

Body overflow:hidden disables scroll by mouse wheel

As I understand you need to show it on one monitor only, so you can optimize your view for one browser.

For example if you'll use chrome for showing on monitor, you can use -webkit hack to hide scroll-bar:

::-webkit-scrollbar { 
    width: 0 !important
}

---

Related Topics