transform: translateを設定すると右に余白が出来てしまう。

Question

slide-right が付いてる要素は　スクロールしたらふわっと現れるようにしてあります。

transform: translate(-30px, 0);
を設定するとスマートフォンのみ右に30px分の余白が出来てしまいます。
余白が出来ないようにするのは可能ですか？？

show　クラスを追加して動かしています。

css

*, *:before, *:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  background-color: #F96;
  background-image: linear-gradient(to right, #ffa055,#ff4a4a);
  margin: 0px 0;
  overflow-x: hidden;
  width:100%;
  box-sizing: border-box;
}	

.slide-right {
	opacity: 0;
	transform: translate(30px, 0);
	transition: all 1s ease-out;
 }

	$(function(){
		$(window).on('load scroll', function() {
			$(".show").each(function() {
				var winScroll = $(window).scrollTop();
				var winHeight = $(window).height();
				var scrollPos = winScroll + (winHeight * 0.9);
				if($(this).offset().top < scrollPos) {
					$(this).css({opacity: 1, transform: 'translate(0, 0)'});
				}
			});
		});
	});

Comments

[itagagaki]

$(".show")
これ合ってますか？

[Lhankor_Mhy]

ご提示のコードを試してみましたが、右の余白というものを確認できませんでした。

[ayuayuayu]

$(".show")　これは合っています！！

有難う御座います。
携帯だと余白が出来てしまうんですよね、、、

[Lhankor_Mhy]

> 携帯だと余白が出来てしまうんですよね、、、

それは書かないと伝わらないのでは……

[itagagaki]

show と slide-right はどういう関係になりますか？

[ayuayuayu]

slide-right　の付いてるクラスに show　を追加して動かしています。
説明が足りなくて申し訳ありません、、、

[Lhankor_Mhy]

携帯で試してみましたが、やはり右の余白というものがわかりませんでした。

[ayuayuayu]

本当ですか、、、
ありがとうございます。。。

[Lhankor_Mhy]

たとえば、.show にスタイルがついているなど、ご提示いただいていない部分に原因があるんじゃないかな、と思います。

[ayuayuayu]

ありがとうございます！
提示してない部分があるのですがtransform: translate(-30px, 0);をtransform: translate(0px, 0);
にすると余白もなくなるのでtransform: translate(-30px, 0);がげんいんなのかな？とおもいました。。。
ですが問題ないということだったのでもう少し探ってみます、、

[Lhankor_Mhy]

もしかすると、その余白について認識が一致してないのかもしれないですね。
私は「.slide-right の右に余白がある」とご質問を読んでいますが、それで大丈夫ですか？

[ayuayuayu]

すいません。違うかもしれないです、、
.slide-rightを付けてしまうと
.slide-rightが付いている要素だけでなく、全体に30pxの余白がでてしまいます、、

[Lhankor_Mhy]

だとすると、他の要素を入れていないので問題が再現しないのかもしれないですね。

[ayuayuayu]

<div class="wrap">をつくって
overflow: hidden;　をして余白を消しました、、

ありがとうございました。

[Lhankor_Mhy]

ご解決されて何よりです。

[ayuayuayu]

ありがとうございました！

Answer 1

<div class="wrap">で全体を囲って

cssで
overflow: hidden;　を指定して余白を消しました。