Hide scrollbar (with scroll enabled)

Question

I have a table with 2 columns and multiple rows

<table border=0 id="feed">
    <tr><td>something</td><td><div class="bubble"></div></td></tr>
    <tr><td style="">something1</td><td><div class="bubble"></div></td></tr>
    <tr><td style="">something2</td><td><div class="bubble"></div></td></tr>
    <tr><td style="">something3</td><td><div class="bubble"></div></td></tr>
    <tr><td style="">something4</td><td><div class="bubble"></div></td></tr>
    <tr><td style="">something5</td><td><div class="bubble"></div></td></tr>
    <tr><td>something-else1</td><td><div class="bubble"></div></td></tr>
    <tr><td>something-els2</td><td><div class="bubble"></div></td></tr>
</table>

I want to be able to scroll down without showing the scrollbar (implying that the total height of the rows exceed the 800px limit) . I am looking for a Chrome/Firefox compatible fix.

Current properties of feed:

  #feed{
    display: block;height: 800px;overflow-y: scroll;
}

This only works on the chrome framework:

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

EDIT:

I tried adding a parent to the table (according to Hide scroll bar, but still being able to scroll):

#outer{
    overflow-y:hidden;
    height:800px;
}
#feed{overflow:scroll;}

HTML:

<div id="outer"><table border=0 id="feed">...</table></div>

Please note that the total height is bigger than 800px so scrolling should work. It does not, though.

How are you expecting people to scroll (or even know that there is hidden content that can be scrolled to) without showing a scroll bar? `overflow: hidden` would seem to fit what you want, but it would be terrible UX. — Rory McCrossan, Mar 05 '14 at 10:01
Check this [link](http://stackoverflow.com/a/16671476/1577396) — Mr_Green, Mar 05 '14 at 10:02
@RoryMcCrossan No, that disables the scroll capability. In the context I work in, the existence of the "hidden content" can be deducted upon scrolling a list of msgs. — Gabe, Mar 05 '14 at 10:07

score 3 · Accepted Answer · answered Mar 05 '14 at 10:45

3

You can do it like this:

#feed{
    display: block;
    height: 100px;
    overflow-y: scroll;
    margin-right: -30px;
}

#outer{
    overflow:hidden;
}

answered Mar 05 '14 at 10:45

Iulian Anghel

411
2
5

I used 100px height because of my small table :) – Iulian Anghel Mar 05 '14 at 10:47
I know it has been years but: you might want to use some right padding on the feed-element to abstract away that even in the same browser, scrollbars may differ in width depending on the OS (firefox+ubuntu for example has 10px); that may not matter in every case but if you want to show a list of items with rounded borders, you might cut off the right side without a padding, producing an inconsistent look. – Wolfone Oct 03 '18 at 08:18

score 0 · Answer 2 · edited Mar 05 '14 at 10:35

0

#feed{
    display: block;
    height: 800px;
    overflow-y: hidden;
}

edited Mar 05 '14 at 10:35

Rahil Wazir

10,007
11
42
64

answered Mar 05 '14 at 10:13

Anand Natarajan

1,172
8
7

Hide scrollbar (with scroll enabled)

2 Answers2

Linked

Related