Question

我需要以-100％的正确位置向右隐藏图像。当我应用负向右移时，图像会一直向右移，并在图像可见的地方创建一个空白水平空间。当我在左侧图像上执行相同的操作时，该图像将正确隐藏。

我需要隐藏从右0到右-100％的过渡图像，而不在页面中创建水平滚动

html, body {
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;

}

.image-left {
  width: 75%;
  weight: 100%;
  position: absolute;
  top:0;
  left:-100%;
}

.image-right {
	width: 76%;
	height: 100%;
	position: absolute;
	top:0;
	right:-100%;
}

<img class="image-left" src="DISRUPTHINK-LOGO-PROCESO-021800.png" alt="">


<img class="image-right" src="DISRUPTHINK-LOGO-PROCESO-03-1800.png" alt="">

我在滚动时使用滚动魔术来打开图像，用负负隐藏左部分，用负右隐藏右部分，但是我需要隐藏负部分，而页面不能向右水平滚动。

Answer 1

我在下面创建了一个快速工作的示例。本质上，您需要将overflow: hidden;设置为html, body，以便当图像溢出其容器的宽度（设置为100%）时，该容器将不会展开并具有滚动条。

$("button").click(function(){
  $(".image-right").addClass("show");
});

html, body {
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
  overflow: hidden;
}

.image-right {
  width: 76%;
  height: 100%;
  position: absolute;
  top:50px;
  transition: right .4s ease;
  right:-100%;
}

.show {
  right: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img class="image-right" src="http://placekitten.com/500/800" alt="">

<button type="button">click to show image</button>

右图为负的图像会导致不必要的水平滚动

1 个答案: