Question

我正在尝试禁用svg的滚动。我试图将属性溢出设置为隐藏或可见，但svg仍会滚动。我在这里创建了jsfiddle。

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

提前谢谢

Answer 1

<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%;
}

Answer 2

这里无事可做。您的SVG很大，底部增加了很多空白。要修复它，只需更新您的SVG文件。

不好的做法：

您可以在overflow: hidden;上使用属性.wave-container，但要使其发挥作用，您必须为其设置height或max-height

Answer 3

尝试将其用于wave-container CSS，而无需指定位置并显示svg的CSS。您的wave-container的CSS应该足够了。希望这会有所帮助

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

如何禁用SVG滚动？

3 个答案: