Geek Answers Handbook

Set overflow-x: scroll and hide the horizontal scroll bar

I want to be able to scroll horizontally, but without the scroll bar shown.

I know in Chrome this:

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

But what about Firefox and Internet Explorer? Someone gives the following solution, but it doesn't seem to work for a horizontal scrollbar, it just works for a vertical scrollbar.

#parent{
        height: 100%;
        width: 100%;
        overflow: hidden;
    }

#child{
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    padding-right: 17px; 
}

Can anybody help me?

+4
source share
2 answers

For fire foxjust use this rule:

overflow: -moz-scrollbars-none;

for IE:

-ms-overflow-style: none;

jsFiddle Demo (check it on FF and IE)

+1
source

Based on this tutorial :

Here is the code:

.element, .outer-container {
 width: 200px;
 height: 200px;
}
 
.outer-container {
 border: 5px solid purple;
 position: relative;
 overflow: hidden;
}
 
.inner-container {
 position: absolute;
 left: 0;
 overflow-x: hidden;
 overflow-y: scroll;
}
 
.inner-container::-webkit-scrollbar {
 display: none;
}
 
<div class="outer-container">
 <div class="inner-container">
 <div class="element">
 Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 Integer vehicula quam nibh, eu tristique tellus dignissim
 quis. Integer condimentum ultrices elit ut mattis.
 Praesent rhoncus tortor metus, nec pellentesque enim
 mattis nec. Nulla vitae turpis ut dui consectetur
 pellentesque quis vel est. Curabitur rutrum, mauris ut
 mollis lobortis, sem est congue lectus, ut sodales nunc
 leo a libero. Cras quis sapien in mi fringilla tempus
 condimentum quis velit. Aliquam id aliquam arcu. Morbi
 tristique aliquam rutrum. Duis tincidunt, orci suscipit
 cursus molestie, purus nisi pharetra dui, tempor
 dignissim felis turpis in mi. Vivamus ullamcorper arcu
 sit amet mauris egestas egestas. Vestibulum turpis neque,
 condimentum a tincidunt quis, molestie vel justo. Sed
 molestie nunc dapibus arcu feugiat, ut sollicitudin metus
 sagittis. Aliquam a volutpat sem. Quisque id magna
 ultrices, lobortis dui eget, pretium libero. Curabitur
 aliquam in ante eu ultricies.
 
 Quisque vitae tincidunt purus. Vivamus feugiat bibendum
 erat, nec interdum urna porta sed. Nunc lobortis neque
 orci, ut suscipit nisl congue feugiat. Vivamus feugiat
 tellus quis cursus sollicitudin. Curabitur dolor massa,
 dictum ut ipsum in, porttitor pellentesque ante. Aenean
 egestas cursus tempor. Maecenas semper tortor sit amet
 egestas cursus. Mauris porttitor quis nisi ut tincidunt.
 Curabitur adipiscing eleifend nibh. Praesent mauris leo,
 consequat vitae orci eget, vestibulum bibendum nisi.
 Aliquam tempus diam ut tortor cursus, eget sodales augue
 adipiscing. Nulla at dignissim libero.
 </div>
 </div>
 </div>
Run codeHide result
0

More articles:


All Articles