Genuanceerd Genuanceerd - 6 months ago 34
CSS Question

Horizontal scrolling & overflow

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.

Answer

#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.