-1

I want to have a horizontal scroll without seeing the scrollbar. So I tried multiple things, such as the solution provided below.

Hide scroll bar, but still being able to scroll

What I have now:

nav {
    display: inline;
    white-space: nowrap;
    width: 100%;
    height: 100%;
    min-width: 75em;
    overflow-y: hidden;
    overflow-x: hidden;

    .overflow_wrap {
        overflow-x: scroll;
        overflow-y: hidden;
        -ms-overflow-style: none;
        width: 100%;
        height: 100%;
        height: auto;
        text-align: center;
        float: left;
        background-color: $white;
        border-bottom: 1px solid $third_fontcolor;

        &::-webkit-scrollbar { 
            width: 0 !important; 
            display: none; 
            background: transparent; 
        }

    }

}

I'm able to scroll horizontally but I still see the scrollbar in other browsers then Chrome. Is there a way to fix this? I saw multiple solutions for vertical scrolling without seeing the scrollbar, but not for horizontal. I'm probably missing something.

Community
  • 1
  • 1
Edblocker
  • 430
  • 1
  • 3
  • 15

3 Answers3

0

There is a way and it's simple - use overflow-x: auto instead of overflow-x: scroll to have the browsers use their default behaviour.

Leo Napoleon
  • 969
  • 6
  • 11
0

Just a test which is working fine.

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

#child{
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    padding-right: 17px; /* Increase/decrease this value for cross-browser compatibility */
}
Azhar Ansari
  • 104
  • 1
  • 7
0

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

#child{
    height: 100px;  /* set the width 20px longer, so that vertical scroll disabled */
    width: 120px;
    overflow-y: auto;
    overflow-x: hidden;
}

#child2{
   width: 100px;  /* real width for scrolling */
 font-size:30px;
 background:#ff0;
 word-wrap:break-word;
}
<div id="parent">
 <div id="child">
  <div id="child2">kjhdsvcbsk,jgfnbv lihkfxdkjfdxhlgbfdzkjvdrjbgkjdxblkjhgvbdzkjbvkjdzbvkjldzgvkjhgbdzlkbvlkjdzkjvdzhflkjbhfdzkjbghlkjfdznbbdxblsergdrsnttdrhytdjnhtdumhykjdnijertsnbvls</div>
 </div>
</div>

The code is above, you may delete things that you don't need.

Important points to note:

  1. set 3 layers of element;
  2. for the outermost layer, set overflow to be hidden, and set the width and height to be the values you want;
  3. for the second layer, set the width or height to be about 20px longer than that of the first layer. Set the overflow-x to be hidden if you want the vertical scrollbar to be hidden; otherwise set overflow-y to be hidden;

That depends on whether horizontal or vertical one should be hidden; If horizontal one, then set the width; otherwise set the height;

  1. for the final child element, set the width and height to your desired value.
  • If you try this for the horizontal scroll, it doesn't work. http://codepen.io/anon/pen/aZboeo – Edblocker May 27 '16 at 12:05
  • For the horizontal one, it would only work if the #child2 element width is fixed –  May 27 '16 at 12:06
  • Of course it doesn't work because width is 100, no scrolling is needed. –  May 27 '16 at 12:12
  • Set the #child overflow-x,y to auto and set both width and height to be 120. –  May 27 '16 at 12:13
  • Well I simply don't see it. We're creating a box with a fixed size, giving it no overflow. Inside this box we're creating 2 other boxes with the same size (20px bigger) and overflow scrolling. I gave it a height and added white-space: nowrap and now I have horizontal scrolling. But does this code gets affected by the parent element? Because these divs are inside a nav (and inside the divs is a navigation) but it's not working really smooth. – Edblocker May 27 '16 at 12:28
  • In desktop computer, if you want to have a horizontal scroll, there is only one way: drag the scrollbar. So, having horizontal scrollbar hidden, you cannot scroll using mouse horizontally, but only by highlighting the words –  May 27 '16 at 12:31