ボタン付きJavascriptスクロール。希望通りに何度も繰り返すことができます

Question

私は自分のウェブサイトに水平スクロール可能なdiv内に表示したい映画があります。 スクロールバーを削除したため、ユーザーはもうスクロールできません。そのため、2つのボタンを追加しました。 1つのボタンは右に移動し、1つのボタンは左に移動します。

問題は、ボタンを必要なだけ頻繁に押すことができることです。したがって、Javascriptの余白を追加することで、映画はもう表示されなくなります。

この問題を解決するにはどうすればよいですか？ 開始に達したときに左ボタンを無効にしたい場合は、終了に達すると右ボタンを無効にします。

$('#right-button').click(function() { 
 
\t \t event.preventDefault(); 
 
\t \t $('.movie-scroll').animate({ 
 
\t \t \t \t marginLeft: "-=200px" 
 
\t \t }, "fast"); 
 
}); 
 
$('#left-button').click(function() { 
 
\t \t event.preventDefault(); 
 
\t \t $('.movie-scroll').animate({ 
 
\t \t \t \t marginLeft: "+=200px" 
 
\t \t }, "fast"); 
 
});

::-webkit-scrollbar { 
 
\t display: none; 
 
} 
 

 
.sc_content { 
 
\t overflow-y: scroll; 
 
} 
 

 
.title_home { 
 
\t font-size: 18px; 
 
\t margin: 30px 0px -10px 30px; 
 
} 
 

 
.movie-scroll { 
 
\t height: 300px; 
 
\t white-space: nowrap; 
 
\t overflow-x: scroll; 
 
\t margin-right: 30px; 
 
} 
 

 
.thumbnail-movie-box { 
 
\t width: 130px; 
 
\t margin: 30px 0px 0px 30px; 
 
\t display: inline-block; 
 
} 
 

 
.thumbnail-movie-content { 
 
\t display: block; 
 
    \t position: relative; 
 
} 
 

 
.thumbnail-movie-poster { 
 
\t width: 130px; 
 
\t height: 195px; 
 
} 
 

 
.thumbnail-movie-title { 
 
    font-size: 12px; 
 
    font-weight: bold; 
 
\t margin: 5px 0px 10px 0px; 
 
\t white-space: nowrap; 
 
\t overflow: hidden; 
 
\t text-overflow: ellipsis; 
 
} 
 

 
.thumbnail-movie-year { 
 
\t font-size: 12px; 
 
\t margin: -5px 10px 10px 0px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
 
<div class="sc_content"> 
 
    <h1 class="title_home">Movies</h1> 
 
    <a href="#" id="left-button">Left</a> 
 
    <div class="movie-scroll"> 
 
    <div class="thumbnail-movie-box"> 
 
     <a href=""> 
 
     <div class="thumbnail-movie-content"> 
 
      <img class="thumbnail-movie-poster" src="https://image.tmdb.org/t/p/w500/ijoPd2gdt8jW982fGemySKDOGtv.jpg"> 
 
     </div> 
 
     </a> 
 
     <a href=""> 
 
     <p class="thumbnail-movie-title">Split</p> 
 
     </a> 
 
     <p class="thumbnail-movie-year">2016</p> 
 
    </div> 
 
    <div class="thumbnail-movie-box"> 
 
     <a href=""> 
 
     <div class="thumbnail-movie-content"> 
 
      <img class="thumbnail-movie-poster" src="https://image.tmdb.org/t/p/w500/ijoPd2gdt8jW982fGemySKDOGtv.jpg"> 
 
     </div> 
 
     </a> 
 
     <a href=""> 
 
     <p class="thumbnail-movie-title">Split</p> 
 
     </a> 
 
     <p class="thumbnail-movie-year">2016</p> 
 
    </div> 
 
    <div class="thumbnail-movie-box"> 
 
     <a href=""> 
 
     <div class="thumbnail-movie-content"> 
 
      <img class="thumbnail-movie-poster" src="https://image.tmdb.org/t/p/w500/ijoPd2gdt8jW982fGemySKDOGtv.jpg"> 
 
     </div> 
 
     </a> 
 
     <a href=""> 
 
     <p class="thumbnail-movie-title">Split</p> 
 
     </a> 
 
     <p class="thumbnail-movie-year">2016</p> 
 
    </div> 
 
    <div class="thumbnail-movie-box"> 
 
     <a href=""> 
 
     <div class="thumbnail-movie-content"> 
 
      <img class="thumbnail-movie-poster" src="https://image.tmdb.org/t/p/w500/ijoPd2gdt8jW982fGemySKDOGtv.jpg"> 
 
     </div> 
 
     </a> 
 
     <a href=""> 
 
     <p class="thumbnail-movie-title">Split</p> 
 
     </a> 
 
     <p class="thumbnail-movie-year">2016</p> 
 
    </div> 
 
    <div class="thumbnail-movie-box"> 
 
     <a href=""> 
 
     <div class="thumbnail-movie-content"> 
 
      <img class="thumbnail-movie-poster" src="https://image.tmdb.org/t/p/w500/ijoPd2gdt8jW982fGemySKDOGtv.jpg"> 
 
     </div> 
 
     </a> 
 
     <a href=""> 
 
     <p class="thumbnail-movie-title">Split</p> 
 
     </a> 
 
     <p class="thumbnail-movie-year">2016</p> 
 
    </div> 
 
    <div class="thumbnail-movie-box"> 
 
     <a href=""> 
 
     <div class="thumbnail-movie-content"> 
 
      <img class="thumbnail-movie-poster" src="https://image.tmdb.org/t/p/w500/ijoPd2gdt8jW982fGemySKDOGtv.jpg"> 
 
     </div> 
 
     </a> 
 
     <a href=""> 
 
     <p class="thumbnail-movie-title">Split</p> 
 
     </a> 
 
     <p class="thumbnail-movie-year">2016</p> 
 
    </div> 
 
    <div class="thumbnail-movie-box"> 
 
     <a href=""> 
 
     <div class="thumbnail-movie-content"> 
 
      <img class="thumbnail-movie-poster" src="https://image.tmdb.org/t/p/w500/ijoPd2gdt8jW982fGemySKDOGtv.jpg"> 
 
     </div> 
 
     </a> 
 
     <a href=""> 
 
     <p class="thumbnail-movie-title">Split</p> 
 
     </a> 
 
     <p class="thumbnail-movie-year">2016</p> 
 
    </div> 
 
    <div class="thumbnail-movie-box"> 
 
     <a href=""> 
 
     <div class="thumbnail-movie-content"> 
 
      <img class="thumbnail-movie-poster" src="https://image.tmdb.org/t/p/w500/ijoPd2gdt8jW982fGemySKDOGtv.jpg"> 
 
     </div> 
 
     </a> 
 
     <a href=""> 
 
     <p class="thumbnail-movie-title">Split</p> 
 
     </a> 
 
     <p class="thumbnail-movie-year">2016</p> 
 
    </div> 
 
    <div class="thumbnail-movie-box"> 
 
     <a href=""> 
 
     <div class="thumbnail-movie-content"> 
 
      <img class="thumbnail-movie-poster" src="https://image.tmdb.org/t/p/w500/ijoPd2gdt8jW982fGemySKDOGtv.jpg"> 
 
     </div> 
 
     </a> 
 
     <a href=""> 
 
     <p class="thumbnail-movie-title">Split</p> 
 
     </a> 
 
     <p class="thumbnail-movie-year">2016</p> 
 
    </div> 
 
    <div class="thumbnail-movie-box"> 
 
     <a href=""> 
 
     <div class="thumbnail-movie-content"> 
 
      <img class="thumbnail-movie-poster" src="https://image.tmdb.org/t/p/w500/ijoPd2gdt8jW982fGemySKDOGtv.jpg"> 
 
     </div> 
 
     </a> 
 
     <a href=""> 
 
     <p class="thumbnail-movie-title">Split</p> 
 
     </a> 
 
     <p class="thumbnail-movie-year">2016</p> 
 
    </div> 
 
    <div class="thumbnail-movie-box"> 
 
     <a href=""> 
 
     <div class="thumbnail-movie-content"> 
 
      <img class="thumbnail-movie-poster" src="https://image.tmdb.org/t/p/w500/ijoPd2gdt8jW982fGemySKDOGtv.jpg"> 
 
     </div> 
 
     </a> 
 
     <a href=""> 
 
     <p class="thumbnail-movie-title">Split</p> 
 
     </a> 
 
     <p class="thumbnail-movie-year">2016</p> 
 
    </div> 
 
</div> 
 
<a href="#" id="right-button">Right</a>

Answer 1

フィドル：

var index = 0; 

$('#right-button').click(function() { 
     event.preventDefault(); 
    if(index <= 7){ 
     $('.movie-scroll').animate({ 
      marginLeft: "-=200px" 
     }, "fast"); 
     index++; 
    } 
}); 
$('#left-button').click(function() { 
     event.preventDefault(); 
    if(index >= -2){ 
     $('.movie-scroll').animate({ 
      marginLeft: "+=200px" 
     }, "fast"); 
     index--; 
    } 
}); 

位置を追跡するために、インデックスを使用し、インデックスがあれば余裕を変更しません：https://jsfiddle.net/zbavtpj4/

変更し、次へのあなたのjavascript範囲内にありません。この例では、境界は手動で定義されています。境界をプログラムで定義することは可能ですが、それを行う時間はありません。

Answer 2

アニメーションを作成する前に、.movi​​e-scroll current margin-leftをチェックする必要があります。

> = 0の場合、＃左ボタンの操作は行われません。

.movi​​e-scrollの幅より大きい場合、＃右ボタンの操作は発生しません。

Answer 3

これはすべて幅の計算と比較に関するものです。

こちらはupdated Fiddleです。

console.clear(); 

var movieWidth = $('.movie-scroll').outerWidth(); 
console.log(movieWidth); 
var viewportWidth = $(window).outerWidth(); 
console.log(viewportWidth); 
var moviePosterWidth = $(".thumbnail-movie-poster").outerWidth(); 
console.log(moviePosterWidth); 

var leftBoundReached = false; 
var rightBoundReached = false; 

$('#right-button').click(function() { 

    event.preventDefault(); 
    if(!rightBoundReached){ 
    $('.movie-scroll').animate({ 
     marginLeft: "-=200px" 
    }, "fast"); 
    } 
    checkScrolling("right"); 
}); 

$('#left-button').click(function() { 
    event.preventDefault(); 
    if(!leftBoundReached){ 
    $('.movie-scroll').animate({ 
     marginLeft: "+=200px" 
    }, "fast"); 
    } 

    checkScrolling("left"); 
}); 

function checkScrolling(direction){ 
    setTimeout(function(){ 
    var scrolled = parseInt($('.movie-scroll').css("marginLeft")); 
    console.log(scrolled); 

    leftBoundReached = false; 
    rightBoundReached = false; 

    if(scrolled>viewportWidth-2*moviePosterWidth && direction=="left"){ 
     console.log("left "+scrolled); 
     leftBoundReached = true; 
    } 
    if(-scrolled>=viewportWidth+movieWidth+0.10*moviePosterWidth && direction=="right"){ 
     console.log("right "+scrolled); 
     rightBoundReached = true; 
    } 
    },300); 
} 

あなたは何が起こっているかを取得するために私が...

Answer 4

を多くのコンソールログを残し、私は私の答えを投稿でスーパー遅れるかもしれませんが、あなたが望むように、このソリューションは、拡張性と希望作品です。ここで

/* JS */ 
 
var scrollWidth = parseInt($('.movie-scroll .thumbnail-movie-box').first().next().position().left) - parseInt($('.movie-scroll .thumbnail-movie-box').first().position().left); 
 
var noOfItems = $('.movie-scroll .thumbnail-movie-box').length; 
 
var count = 0; 
 
$('#right-button').click(function() { 
 
    event.preventDefault(); 
 
    var movieScroll = $('.movie-scroll'); 
 
    movieScroll.filter(function() { 
 
    if (count == (noOfItems - 1)) 
 
     return false; 
 
    count++; 
 
    return true; 
 
    }).animate({ 
 
    marginLeft: "-=" + scrollWidth + "px" 
 
    }, "fast"); 
 
}); 
 
$('#left-button').click(function() { 
 
    event.preventDefault(); 
 
    var movieScroll = $('.movie-scroll'); 
 
    movieScroll.filter(function() { 
 
    if (count == 0) 
 
     return false; 
 
    count--; 
 
    return true; 
 
    }).animate({ 
 
    marginLeft: "+=" + scrollWidth + "px" 
 
    }, "fast"); 
 
});

/* CSS */ 
 

 
::-webkit-scrollbar { 
 
    display: none; 
 
} 
 

 
.sc_content { 
 
    overflow-y: scroll; 
 
} 
 

 
.title_home { 
 
    font-size: 18px; 
 
    margin: 30px 0px -10px 30px; 
 
} 
 

 
.movie-scroll { 
 
    height: 300px; 
 
    white-space: nowrap; 
 
    overflow-x: scroll; 
 
    margin-right: 30px; 
 
} 
 

 
.thumbnail-movie-box { 
 
    width: 130px; 
 
    margin: 30px 0px 0px 30px; 
 
    display: inline-block; 
 
} 
 

 
.thumbnail-movie-content { 
 
    display: block; 
 
    position: relative; 
 
} 
 

 
.thumbnail-movie-poster { 
 
    width: 130px; 
 
    height: 195px; 
 
} 
 

 
.thumbnail-movie-title { 
 
    font-size: 12px; 
 
    font-weight: bold; 
 
    margin: 5px 0px 10px 0px; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
} 
 

 
.thumbnail-movie-year { 
 
    font-size: 12px; 
 
    margin: -5px 10px 10px 0px; 
 
}

<!-- HTML --> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="sc_content"> 
 
    <h1 class="title_home">Movies</h1> 
 
    <a href="#" id="left-button">Left</a> 
 
    <div class="movie-scroll"> 
 
    <div class="thumbnail-movie-box"> 
 
     <a href=""> 
 
     <div class="thumbnail-movie-content"> 
 
      <img class="thumbnail-movie-poster" src="https://image.tmdb.org/t/p/w500/ijoPd2gdt8jW982fGemySKDOGtv.jpg"> 
 
     </div> 
 
     </a> 
 
     <a href=""> 
 
     <p class="thumbnail-movie-title">Split</p> 
 
     </a> 
 
     <p class="thumbnail-movie-year">2016</p> 
 
    </div> 
 
    <div class="thumbnail-movie-box"> 
 
     <a href=""> 
 
     <div class="thumbnail-movie-content"> 
 
      <img class="thumbnail-movie-poster" src="https://image.tmdb.org/t/p/w500/ijoPd2gdt8jW982fGemySKDOGtv.jpg"> 
 
     </div> 
 
     </a> 
 
     <a href=""> 
 
     <p class="thumbnail-movie-title">Split</p> 
 
     </a> 
 
     <p class="thumbnail-movie-year">2016</p> 
 
    </div> 
 
    <div class="thumbnail-movie-box"> 
 
     <a href=""> 
 
     <div class="thumbnail-movie-content"> 
 
      <img class="thumbnail-movie-poster" src="https://image.tmdb.org/t/p/w500/ijoPd2gdt8jW982fGemySKDOGtv.jpg"> 
 
     </div> 
 
     </a> 
 
     <a href=""> 
 
     <p class="thumbnail-movie-title">Split</p> 
 
     </a> 
 
     <p class="thumbnail-movie-year">2016</p> 
 
    </div> 
 
    <div class="thumbnail-movie-box"> 
 
     <a href=""> 
 
     <div class="thumbnail-movie-content"> 
 
      <img class="thumbnail-movie-poster" src="https://image.tmdb.org/t/p/w500/ijoPd2gdt8jW982fGemySKDOGtv.jpg"> 
 
     </div> 
 
     </a> 
 
     <a href=""> 
 
     <p class="thumbnail-movie-title">Split</p> 
 
     </a> 
 
     <p class="thumbnail-movie-year">2016</p> 
 
    </div> 
 
    <div class="thumbnail-movie-box"> 
 
     <a href=""> 
 
     <div class="thumbnail-movie-content"> 
 
      <img class="thumbnail-movie-poster" src="https://image.tmdb.org/t/p/w500/ijoPd2gdt8jW982fGemySKDOGtv.jpg"> 
 
     </div> 
 
     </a> 
 
     <a href=""> 
 
     <p class="thumbnail-movie-title">Split</p> 
 
     </a> 
 
     <p class="thumbnail-movie-year">2016</p> 
 
    </div> 
 
    <div class="thumbnail-movie-box"> 
 
     <a href=""> 
 
     <div class="thumbnail-movie-content"> 
 
      <img class="thumbnail-movie-poster" src="https://image.tmdb.org/t/p/w500/ijoPd2gdt8jW982fGemySKDOGtv.jpg"> 
 
     </div> 
 
     </a> 
 
     <a href=""> 
 
     <p class="thumbnail-movie-title">Split</p> 
 
     </a> 
 
     <p class="thumbnail-movie-year">2016</p> 
 
    </div> 
 
    <div class="thumbnail-movie-box"> 
 
     <a href=""> 
 
     <div class="thumbnail-movie-content"> 
 
      <img class="thumbnail-movie-poster" src="https://image.tmdb.org/t/p/w500/ijoPd2gdt8jW982fGemySKDOGtv.jpg"> 
 
     </div> 
 
     </a> 
 
     <a href=""> 
 
     <p class="thumbnail-movie-title">Split</p> 
 
     </a> 
 
     <p class="thumbnail-movie-year">2016</p> 
 
    </div> 
 
    <div class="thumbnail-movie-box"> 
 
     <a href=""> 
 
     <div class="thumbnail-movie-content"> 
 
      <img class="thumbnail-movie-poster" src="https://image.tmdb.org/t/p/w500/ijoPd2gdt8jW982fGemySKDOGtv.jpg"> 
 
     </div> 
 
     </a> 
 
     <a href=""> 
 
     <p class="thumbnail-movie-title">Split</p> 
 
     </a> 
 
     <p class="thumbnail-movie-year">2016</p> 
 
    </div> 
 
    <div class="thumbnail-movie-box"> 
 
     <a href=""> 
 
     <div class="thumbnail-movie-content"> 
 
      <img class="thumbnail-movie-poster" src="https://image.tmdb.org/t/p/w500/ijoPd2gdt8jW982fGemySKDOGtv.jpg"> 
 
     </div> 
 
     </a> 
 
     <a href=""> 
 
     <p class="thumbnail-movie-title">Split</p> 
 
     </a> 
 
     <p class="thumbnail-movie-year">2016</p> 
 
    </div> 
 
    <div class="thumbnail-movie-box"> 
 
     <a href=""> 
 
     <div class="thumbnail-movie-content"> 
 
      <img class="thumbnail-movie-poster" src="https://image.tmdb.org/t/p/w500/ijoPd2gdt8jW982fGemySKDOGtv.jpg"> 
 
     </div> 
 
     </a> 
 
     <a href=""> 
 
     <p class="thumbnail-movie-title">Split</p> 
 
     </a> 
 
     <p class="thumbnail-movie-year">2016</p> 
 
    </div> 
 
    <div class="thumbnail-movie-box"> 
 
     <a href=""> 
 
     <div class="thumbnail-movie-content"> 
 
      <img class="thumbnail-movie-poster" src="https://image.tmdb.org/t/p/w500/ijoPd2gdt8jW982fGemySKDOGtv.jpg"> 
 
     </div> 
 
     </a> 
 
     <a href=""> 
 
     <p class="thumbnail-movie-title">Split</p> 
 
     </a> 
 
     <p class="thumbnail-movie-year">2016</p> 
 
    </div> 
 
    </div> 
 
    <a href="#" id="right-button">Right</a>