youtube like horizo​​ntal scroll div

Question

我正在嘗試使用箭頭標記（左右）滾動來實現水平滾動div部分。

我所做的是滾動，但它是無限滾動，滾動應該在結束後停止。

我試過到目前爲止，

<div class="scrollleft" style="float: left; cursor: pointer; margin-bottom: 5px; margin-right: 5px;">LEFT</div> 
    <div class="container scrollbar" 
    style="white-space: nowrap; overflow-x: hidden; overflow-y: hidden; width:100%;"> 
     <div > some content </div> 
     <div > some content </div> 
     <div > some content </div> 
     <div > some content </div> 
    </div> 
</div> 
<div class="scrollright" style="float: right; cursor: pointer; margin-bottom: 5px; margin-right: 5px;">RIGHT</div> 

腳本：

$('.scrollright').click(function() { 

    event.preventDefault(); 

    $('.scrollbar').animate({ 
    marginLeft: "-=200px" 
    }, "fast"); 
}); 

$('.scrollleft').click(function() { 
    event.preventDefault(); 
    $('.scrollbar').animate({ 
    marginLeft: "+=200px" 
    }, "fast"); 
}); 

}); 

Answer 1

您可以保持當前選定的div的指數，並檢查它是否在範圍之內（從0到申報單的數量）

var numberOfDivs = $(".container>div").length; 
var index = 0; 

$('.scrollright').click(function() { 
    event.preventDefault(); 
    if (index <= 0) 
    return; 
    index += 1; 

    $('.scrollbar').animate({ 
    marginLeft: "-=200px" 
    }, "fast"); 
}); 

$('.scrollleft').click(function() { 
    event.preventDefault(); 
    if (index >= numberOfDivs) 
    return; 
    index -= 1; 

    $('.scrollbar').animate({ 
    marginLeft: "+=200px" 
    }, "fast"); 
}); 

Answer 2

你不需要event.preventDefault();。你將不得不爲每個方向定義結束。對於scrollright一下，到底是0，而對於scrollleft一下，到底是window減去scrollbar的寬度的寬度（但你把它到100％，所以我現在減去200）：

var BoxCount = 4; 
 
var BoxWidth = 100; 
 
var ScrollDistance = BoxWidth; //It can be any other value if you like. 
 
var ScrollButtonWidth = 50; 
 

 
$('.scrollright').click(function() { 
 
    var current = parseInt($('.scrollbar').css("margin-left")); 
 
    var end = $(window).width() - BoxWidth - ScrollButtonWidth; 
 
    var move = ScrollDistance; 
 
    if(current < end){ 
 
    if((end - current) < BoxWidth) 
 
     move = end - current; 
 
    $('.scrollbar').animate({ marginLeft: "+=" + move }, "fast"); 
 
    } 
 
    else{ 
 
    $('.scrollbar').animate({ marginLeft: end }, "fast"); 
 
    } 
 
}); 
 

 
$('.scrollleft').click(function() { 
 
    var current = parseInt($('.scrollbar').css("margin-left")); 
 
    var end = - (BoxWidth * (BoxCount - 1)); 
 
    var move = ScrollDistance; 
 
    if(current > end){ 
 
    if((current - end) < BoxWidth) 
 
     move = current - end; 
 
    $('.scrollbar').animate({ marginLeft: "-=" + move }, "fast"); 
 
    } 
 
    else{ 
 
    $('.scrollbar').animate({ marginLeft: end }, "fast"); 
 
    } 
 
});

.scrollleft, .scrollright{ 
 
    display: inline-block; 
 
    cursor: pointer; 
 
    width: 20px; 
 
    height: 100px; 
 
    color: #fff; 
 
    background-color: #555; 
 
    line-height: 100px; 
 
    text-align: center; 
 
    box-sizing: border-box; 
 
} 
 

 
.scrollleft:hover, .scrollright:hover{ 
 
    background-color: #999; 
 
} 
 

 
.container{ 
 
    display: inline-block; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    height: 100px; 
 
    width: calc(100% - 40px); /* 100% - (2 * ScrollButtonWidth) */ 
 
    background-color: #eee; 
 
    box-sizing: border-box; 
 
} 
 

 
.scrollbar{ 
 
    display: inline-block; 
 
    box-sizing: border-box; 
 
} 
 

 
.contentbox{ 
 
    display: inline-block; 
 
    width: 100px; 
 
    height: 100px; 
 
    color: #f00; 
 
    border: 1px solid #f00; 
 
    line-height: 100px; 
 
    text-align: center; 
 
    box-sizing: border-box; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="scrollleft" style="float: left;">&lt;</div 
 
><div class="container"> 
 
    <div class="scrollbar"> 
 
    <div class="contentbox">content-1</div 
 
    ><div class="contentbox">content-2</div 
 
    ><div class="contentbox">content-3</div 
 
    ><div class="contentbox">content-4</div> 
 
    </div> 
 
</div 
 
><div class="scrollright" style="float: right;">&gt;</div>