javascript - hide scrollbar but able to scroll with mouse - Stack Overflow

admin管理员组

文章数量:1355614

I want to hide scrollbar to appear on a long div,but still able to scroll through mouse or keyboard arrow keys.I read another thread here about scrollable.Tried to use that..but could not implement that...could someone guide me how to implement that clearly or is there any other option with jquery or css?

Any help would be greatly appreciated.

Thanks

I want to hide scrollbar to appear on a long div,but still able to scroll through mouse or keyboard arrow keys.I read another thread here about scrollable.Tried to use that..but could not implement that...could someone guide me how to implement that clearly or is there any other option with jquery or css?

Any help would be greatly appreciated.

Thanks

• javascript
• jquery
• html
• css
• scroll

Share Improve this question Follow edited Feb 5, 2012 at 16:32 Samuel Liew 79.2k111111 gold badges169169 silver badges304304 bronze badges asked Feb 5, 2012 at 7:32 kd7kd7 53322 gold badges66 silver badges1717 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

I'm not 100% sure on the browser patibility 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.

To do this is add the following css

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

This is saying that hey remove the display of the scroll bar but keep the functionality

本文标签： javascripthide scrollbar but able to scroll with mouseStack Overflow