How to Hide horizontal scrollbars? - html

Question

Following is the css for my body:
body{
margin: 0px;
width: 100vw;
height: 100vh;
}
I have some divs that extend beyond the viewport on the right side (there is no way around it, that is just how my design is setup). However, I do not want to make the page scrollable horizontally.
This is the jsfiddle for the divs that are extending beyond the viewport (the red stripes are long, and the jsfiddle is not properly optimized, so its not exactly how it looks in a full browser screen), https://jsfiddle.net/gxk985kb/
How can I just not allow the horizontal scrolling at all?

Answer 1

Try "overflow-y:hidden;" for #designWrapper.
This way you can remove the horizontal scroll.

Answer 2

<svg style="background-color: #dedede;" fill="red" width="400" height="200">
<path d="M 10 190 L 60 190 L 110 10 L 60 10 Z" />
<path d="M 70 190 L 120 190 L 170 10 L 120 10 Z" />
<path d="M 130 190 L 180 190 L 230 10 L 180 10 Z" />
<path d="M 190 190 L 240 190 L 290 10 L 240 10 Z" />
</svg>
i think you should make your design with svg. it is more suitable for like this design. CSS transform property is supported by min ie 10 (-ms- ie9).