横のスクロールボタンを作っています

Question

ヘッダーの左右にスクロールボタンを付けて
leftボタンはうまくできたのですがrightボタンが上手くできません。。
横にスクロールできなくなったらボタンが消える仕組みです。

●rightボタンを一回押すとrightボタンが消えてしまう
●rightボタンが消えたら元の位置にスクロールしてもrightボタンは表示されない

if($(this).scrollLeft() < $('.hed').width() - $('.hed').width()) {
ここの部分が問題なんですけど要素を増やさないと難しいですか？

<div class="hed">

	<img id="left" class="left" src="img/btm2.png">
	<img id="right" class="right" src="img/btm.png">
	
	<img class="open" href="" src="img/1.png" data-target="b1">
	<img class="open" href="" src="img/5.png" data-target="b2">
	<img class="open" href="" src="img/2.png" data-target="b3">
	<img class="open" href="" src="img/5.png" data-target="b4">
	<img class="open" href="" src="img/3.png" data-target="b5">
	<img class="open" href="" src="img/5.png" data-target="b6">
	<img class="open" href="" src="img/4.png" data-target="b7">
	<img class="open" href="" src="img/5.png" data-target="b8">
	<img class="open" href="" src="img/1.png" data-target="b1">
	<img class="open" href="" src="img/5.png" data-target="b2">
	<img class="open" href="" src="img/2.png" data-target="b3">
	<img class="open" href="" src="img/5.png" data-target="b4">
	<img class="open" href="" src="img/3.png" data-target="b5">
	<img class="open" href="" src="img/5.png" data-target="b6">
	<img class="open" href="" src="img/4.png" data-target="b7">
	<img class="open" href="" src="img/5.png" data-target="b8">

</div>

ーーcssですーーー

.hed{
	width: 86%;
	height: 100px;
	border-bottom: 1px solid #D0D0D0;
	display: flex;
	padding: 0 10px;
	position: relative;
	overflow-x: auto;
	margin: auto;
}

.in img {
	width: 20%;
}
img.left{
	position: absolute;
	width: 87px;
	top: 6px;
	left:0;
	top: 0;
	position: fixed;
	background: #00000075;
}
img.right{
	position: absolute;
    width:87px;
	top: 0;
	right: 0;
	position: fixed;
}



<script>	
		$(function(){
			
  $('#right').click(function(){
	   $('.hed').animate({
        scrollLeft: $('.hed').scrollLeft() + 280
        });
        return false;
        });


    $('#left').click(function () {
        $('.hed').animate({
         scrollLeft: $('.hed').scrollLeft() - 280
        });
        return false;
        });
});
		
//左へスクロールで表示
$('.hed').scroll(function () {
  if($(this).scrollLeft() < $('.hed').width() - $('.hed').width()) {
    $('#right').fadeIn();
  } else {
    $('#right').fadeOut();
  }
});
//右へスクロールで表示
$('#left').hide();
$('.hed').scroll(function () {
  if($(this).scrollLeft() > 0) {
    $('#left').fadeIn();
  } else {
    $('#left').fadeOut();
  }
});

</script>

Answer 1

はみ出した部分も含めての幅を求める必要があります。下記が参考になります。

要素からあふれた部分も含めた幅を求めたい - knowledge base

あと、左右パディング分も引いたものとスクロール量(scrollLeft())を比較します。

//左へスクロールで表示
const hed = $('.hed').get(0);
$('.hed').scroll(function () {
  if($(this).scrollLeft() < hed.scrollWidth - $('.hed').width() - 22) {
    $('#right').fadeIn();
  } else {
    $('#right').fadeOut();
  }
});

Comments

[ayuayuayu]

なるほど、、
ありがとうございます。勉強になります
質問なのですが、- 22　は何の数字なのでしょうか、、？？

[hatena19]

.hed に padding: 0 10px; と左右パディングを設定しているので、その20pxと誤差を考慮しての余裕を持たせて22pxを引いてます。

[ayuayuayu]

そういうことだったんですね！！ありがとうございます！！