【问题标题】：Javascript scroll with buttons; Can be repeated as often as desiredJavascript 滚动按钮；可以根据需要多次重复
【发布时间】：2017-05-23 16:38:42
【问题描述】：
我有一些电影想在我的网站上显示在一个水平的、可滚动的 div 中。
因为我去掉了滚动条，用户不能再滚动了，这就是我添加两个按钮的原因。一键右移，一键左移。
问题是，可以根据需要随时按下按钮。所以电影不会再显示了，因为通过 Javascript 增加了边距。
我该如何解决这个问题？
我想在开始时禁用左键，我想在结束时禁用右键。
$('#right-button').click(function() {
event.preventDefault();
$('.movie-scroll').animate({
marginLeft: "-=200px"
}, "fast");
});
$('#left-button').click(function() {
event.preventDefault();
$('.movie-scroll').animate({
marginLeft: "+=200px"
}, "fast");
});
::-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;
}
<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>
【问题讨论】：
标签：
javascript
jquery
html
css
【解决方案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--;
}
});
使用索引来跟踪位置，如果索引不在范围内，则不会更改边距。在此示例中，边界是手动定义的。可以通过编程方式定义边界，但我没有时间这样做。
【解决方案2】：
在制作动画之前，你应该检查 .movie-scroll current margin-left。
如果 >= 0，则不应发生 #left-button 操作。
如果它大于 .movie-scroll 宽度，则不应发生 #right-button 操作。
【解决方案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);
}
我留下了很多控制台日志让你了解正在发生的事情......
【解决方案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>