Hide scrollbar with overflow:scroll enabled

Question

I need to hide the scrollbar on a div that has overflow:scroll; enabled so that the div will scroll with mouse and keyboard but the scrollbar itself will not be displayed.

is there a way of doing this with css or is javascript the way to go?

Please refrain from changing or removing standard UI elements from your users, it wil only annoy them. — Damien
– Damien, Commented Dec 3, 2012 at 13:38
I think people are reading this wrong I don't want to hide the body scroll or any default UI. I have set a div to have overflow:scroll; I want the functionality overflow scroll gives that div but i dont want the scrollbar that comes with it to be displayed. — StephenJRomero
– StephenJRomero, Commented Dec 3, 2012 at 13:50

Stephan Bönnemann-Walenta · Accepted Answer · 2012-12-03 13:46:37Z

32

You can do this with pure CSS (at least in webkit browsers). You have to use special scrollbar pseudo-classes to achieve this

::-webkit-scrollbar {
    display: none;
}

Read this excellent blogpost for further information.

answered Dec 3, 2012 at 13:46

Stephan Bönnemann-Walenta

3,4031 gold badge24 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Maloric · Accepted Answer · 2012-12-03 14:05:56Z

4

You could put the scrolling div inside of a second div with overflow hidden, then just make the inner div a little wider and taller (the amount may vary depending on the browser, however).

Something like this:

#outer {
    overflow:hidden;
    width:200px; 
    height:400px;
    border:1px solid #ccc;
}
#inner {
    overflow:scroll; 
    width:217px; 
    height:417px;
}

Full example at http://jsfiddle.net/uB6Dg/1/.

Edit: Unfortunately you can still get to the scrollbars by highlighting the text and dragging, and it does make padding etc a bit more of a pain, but other than this I think javascript is the way to go.

edited Dec 3, 2012 at 14:05

answered Dec 3, 2012 at 13:46

Maloric

5,6253 gold badges35 silver badges46 bronze badges

2 Comments

StephenJRomero Over a year ago

I went with this one because i prefered using css but may i suggest also adding Stephan Bönnemann idea and uses webkit-scrollbar as this stops it from showing if they highlight the content

Maloric Over a year ago

I like the solution proposed by Stephan Bönnemann but unfortunately adding it to the above means that #inner ends up 17px too wide in webkit browsers. I think Stephan's solution is the most elegant for webkit browsers while mine would provide compatibility for browsers without a similar pseudo selector.

Alex McCabe · Accepted Answer · 2017-03-23 17:22:52Z

@Maloric answer pointed me in the correct direction, however I needed fluid width, and I also wanted to be more accurate on the width of the scrollbar.

Here is a function that will return the exact width of the scrollbar based on what the browser reports.

var getWidth = function () {
    var scrollDiv = document.createElement('div'),
        scrollbarWidth;

    scrollDiv.style.overflow = 'scroll';
    document.body.appendChild(scrollDiv);

    scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
    
    document.body.removeChild(scrollDiv);

    return scrollbarWidth;
};

var width = getWidth();
var container = document.querySelector('.overflowing-container');

container.style.paddingRight = width + 'px';
container.style.marginRight = (width * -1) + 'px';

// Just for testing purposes
document.querySelector('.scrollbar-width').innerHTML = 'scrollbar height: ' + getWidth()

.container {
  height: 200px;
  overflow-x: hidden;
  overflow-y: auto;
  width: 500px;
}

.overflowing-container {
  height: 100%;
  overflow-y: auto;
  width: 100%;

}

<div class="container">
  <div class="overflowing-container">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tristique feugiat metus, eget mollis nibh vestibulum eu. Nullam eros orci, gravida eu quam nec, maximus posuere dui. Maecenas erat magna, elementum eget nunc eget, tincidunt varius nisl. Phasellus pretium congue consectetur. Donec rutrum nisi sed eros posuere, vel pretium nunc viverra. Praesent consequat sagittis urna, quis convallis magna gravida et. In sed eleifend arcu.

  Duis ornare condimentum est luctus malesuada. Morbi nec sodales nunc. Morbi vehicula tristique massa, nec lacinia tellus vulputate fringilla. Nam eget pulvinar libero. Vestibulum ligula mi, tincidunt ac pellentesque vitae, convallis eu tortor. Cras varius dolor sit amet libero rhoncus, mattis aliquet augue porttitor. Etiam sollicitudin, sem ut mollis imperdiet, erat enim gravida tortor, et imperdiet sem nibh in ex. Aliquam ac aliquam risus. Suspendisse gravida suscipit sapien, et ultrices massa ornare eget. Nulla venenatis pellentesque arcu at auctor. Sed libero ligula, pretium in metus a, malesuada ullamcorper leo. Vivamus tempor velit in ante fringilla rhoncus. Nam ac iaculis arcu. Mauris a nisi quis arcu feugiat posuere.
  </div>
</div>

<div class="scrollbar-width"></div>

The above snippet shows this in action.

Tyler2P · Accepted Answer · 2023-07-19 19:37:36Z

-1

set the width of scroll Bar to none:

scrollbar-width: none;

edited Jul 19, 2023 at 19:37

Tyler2P

2,37030 gold badges26 silver badges34 bronze badges

answered Jul 16, 2023 at 19:43

Pradeep Singh

1

Comments

Shakeel · Accepted Answer · 2012-12-03 13:59:30Z

-3

You need to make use of the jquery plugin from this site http://jscrollpane.kelvinluck.com/

answered Dec 3, 2012 at 13:59

Shakeel

111 bronze badge

1 Comment

steel Over a year ago

You don't need to, but it is an option.

Collectives™ on Stack Overflow

Hide scrollbar with overflow:scroll enabled

5 Answers 5

Comments

2 Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

2 Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related