set overflow-x:scroll and hide the horizontal scrollbar

Question

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

I know, in Chrome it's:

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

But what about the Firefox and Internet Explorer? Somebody gives the following solution, but it seems does not work for horizontal scroll bar, it just works for vertical scroll bar.

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

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

Is there someone could help me?

Pedram · Accepted Answer · 2016-03-17 03:55:32Z

1

For fire fox just use this rule:

overflow: -moz-scrollbars-none;

for IE:

-ms-overflow-style: none;

jsFiddle Demo (Test it on FF & IE)

answered Mar 17, 2016 at 3:55

Pedram

16.7k10 gold badges47 silver badges73 bronze badges

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

Comments

Ferrmolina · Accepted Answer · 2016-03-17 03:52:04Z

Based on this tutorial:

Here 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>

Think you, your answer is also OK, but I think the above one is more simple

Collectives™ on Stack Overflow

set overflow-x:scroll and hide the horizontal scrollbar

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related