html - 带有负右的图像，会产生不需要的水平滚动

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>