JavaScript滾動按鈕;可以根據需要經常重複

Question

我有一些電影我想要在我的網站上顯示一個水平的，可滾動的div。 因爲我刪除了滾動條，用戶不能再滾動，這就是爲什麼我添加了兩個按鈕。一個按鈕向右移動，一個按鈕向左移動。

問題是，按鈕可以按照需要經常按下。所以電影將不會再顯示，因爲通過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

小提琴：https://jsfiddle.net/zbavtpj4/

更改您的JavaScript以下幾點：

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--; 
    } 
}); 

使用索引來跟蹤位置，如果該指數不改變保證金不在範圍內。在這個例子中邊界是手動定義的。可以通過編程來定義邊界，但我沒有時間這樣做。

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>