How to disable SVG scroll?

user_5155587 0
Viewed 1610

I'm trying to disable the scrolling of the svg. I tried to put the property overflow to hidden or visible but the svg still to scroll. I created the jsfiddle here.

https://jsfiddle.net/pct8rL03/1/

.svg {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
}

.wave-container {
  display: inline-block;
  position: absolute;
  width: 100%;
  vertical-align: middle;
  overflow: hidden;
}
<div class="wave-container">
  <svg viewBox="0 0 500 500" preserveAspectRatio="xMinYMin meet">
        <path d="M0,95 C90,130 250,0 500,100 L500,00 L0,0 Z" style="stroke: none; fill:#e0efe3;"></path>
      </svg>
</div>

Thank you in advance

css html
3 Answers

Try using this for your wave-container css and you don't need to give a position and display css for your svg. The css for your wave-container should be enough. Hope this helps

.wave-container {
  width: -webkit-fill-available;
    height: -webkit-fill-available;
    vertical-align: middle;
    overflow: hidden;
}
<div class="wave-container">
    <svg viewBox="0 0 500 500"  preserveAspectRatio="xMinYMin meet">
        <path d="M0,95 C90,130 250,0 500,100 L500,00 L0,0 Z" style="stroke: none; fill:#e0efe3;"></path>
      </svg>      
   </div>

user_101589520

There is nothing to do here. Your SVG is just to big and add to much blank space at the bottom. To fix it just update your SVG file.

Not a good practice:

You can use the property overflow: hidden; on your .wave-container but to make it work you have to set a height or max-height to it

user_85836690 
<div class="wave-container">
                <svg viewBox="0 0 500 500"  preserveAspectRatio="xMinYMin meet">
                    <path d="M0,95 C90,130 250,0 500,100 L500,00 L0,0 Z" style="stroke: none; fill:#e0efe3;"></path>
                </svg>                
            </div>  

body{
  margin:0px 0px;
  padding:0px px;
}
.svg {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
}
.wave-container {
  display: inline-block;
  position: absolute;
  width: 100%;
  vertical-align: middle;
  overflow: hidden;
  height:100%;
}
user_117026620
Related