響應式水平JS滾動

Question

我創建了一個水平滾動條，但我需要一些幫助，以我的JavaScript。 我想要的是，當我點擊右鍵時，它應該與第二個盒子，然後是第三個盒子完全對齊，依此類推。我的JavaScript設置爲滾動100px。但我希望它能與其他盒子完美對齊。

重要！水平滾動將被添加到響應網站。所以我不能在這裏使用PX :)希望有人能幫助:)謝謝

$(document).ready(function(){ 
 
    $(".arrow-left").click(function(){ 
 
     $(".offer-pg-cont").animate({scrollLeft: "-="+100}); 
 
    }); 
 
    $(".arrow-right").click(function(){ 
 
     $(".offer-pg-cont").animate({scrollLeft: "+="+100}); 
 
    });   
 
});

.offer-pg-cont{ 
 
    width: 100%; 
 
    overflow-x: auto; 
 
    margin: 0px; 
 
} 
 
span.arrow-left,span.arrow-right{ 
 
    display: block; 
 
    position: absolute; 
 
    background-color: #555; 
 
    top: 40px; 
 
    color:white; 
 
    z-index: 2; 
 
    cursor: pointer; 
 
} 
 
span.arrow-left{ 
 
    left: 0px; 
 
} 
 
span.arrow-right{ 
 
    right: 0px; 
 
} 
 
span.arrow-left:hover,.offer-pg span.arrow-right:hover{ 
 
    background-color: #333; 
 
} 
 
.content{ 
 
    width: 1500px; 
 
} 
 
.item-wrapper.offer-con{ 
 
    background-color: #333 !important; 
 
} 
 
.offer-con .left-item h4 { 
 
    color: #fff; 
 
    font-weight: normal; 
 
    margin: 0px; 
 
} 
 
.offer-con .right-item{ 
 
    float: right; 
 
    padding: 10px; 
 
} 
 
.offer-con .right-item h5{ 
 
    color: #cb9944; 
 
    margin: 0px; 
 
    font-size: 14px; 
 
} 
 
.content > .portfolio-item{ 
 
    width: 10%; 
 
    background-color:blue; 
 
    margin-right:50px; 
 
    float:left; 
 
    height:100px !important; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<span class='arrow-left'>left</span> 
 
<span class='arrow-right'>right</span> 
 
<div class='row offer-pg-cont'> 
 
    <div class='content'> 
 
     <div class="col-md-3 portfolio-item"></div> 
 
     <div class="col-md-3 portfolio-item"></div> 
 
     <div class="col-md-3 portfolio-item"></div> 
 
     <div class="col-md-3 portfolio-item"></div> 
 
     <div class="col-md-3 portfolio-item"></div> 
 
     <div class="col-md-3 portfolio-item"></div> 
 
     <div class="col-md-3 portfolio-item"></div> 
 
    </div> 
 
</div>

Answer 1

你必須檢查你的元素的寬度和保證金，並添加到您的滾動。但警告，箱內內容寬度必須是：boxe X框（寬度+餘量）的數目：

實施例：6×（200 + 50）

因爲否則你的滾動不會充分：請嘗試以下

$(document).ready(function(){ 
 
    var margin = parseInt($(".portfolio-item").css("margin-right").replace("px","")); 
 
    var width = parseInt($(".portfolio-item").width()) ; 
 
    var widthitem = width + margin; 
 
    console.log(widthitem) 
 
    $(".arrow-left").click(function(){ 
 
     $(".offer-pg-cont").animate({scrollLeft: "-="+widthitem}); 
 
    }); 
 
    $(".arrow-right").click(function(){ 
 
     $(".offer-pg-cont").animate({scrollLeft: "+="+widthitem}); 
 
    });   
 
});

.offer-pg-cont{ 
 
    width: 100%; 
 
    overflow-x: auto; 
 
    margin: 0px; 
 
} 
 
span.arrow-left,span.arrow-right{ 
 
    display: block; 
 
    position: absolute; 
 
    background-color: #555; 
 
    top: 40px; 
 
    color:white; 
 
    z-index: 2; 
 
    cursor: pointer; 
 
} 
 
span.arrow-left{ 
 
    left: 0px; 
 
} 
 
span.arrow-right{ 
 
    right: 0px; 
 
} 
 
span.arrow-left:hover,.offer-pg span.arrow-right:hover{ 
 
    background-color: #333; 
 
} 
 
.content{ 
 
    width: 1500px; 
 
} 
 
.item-wrapper.offer-con{ 
 
    background-color: #333 !important; 
 
} 
 
.offer-con .left-item h4 { 
 
    color: #fff; 
 
    font-weight: normal; 
 
    margin: 0px; 
 
} 
 
.offer-con .right-item{ 
 
    float: right; 
 
    padding: 10px; 
 
} 
 
.offer-con .right-item h5{ 
 
    color: #cb9944; 
 
    margin: 0px; 
 
    font-size: 14px; 
 
} 
 
.content > .portfolio-item{ 
 
    width: 10%; 
 
    background-color:blue; 
 
    margin-right:50px; 
 
    float:left; 
 
    height:100px !important; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<span class='arrow-left'>left</span> 
 
<span class='arrow-right'>right</span> 
 
<div class='row offer-pg-cont'> 
 
    <div class='content'> 
 
     <div class="col-md-3 portfolio-item"></div> 
 
     <div class="col-md-3 portfolio-item"></div> 
 
     <div class="col-md-3 portfolio-item"></div> 
 
     <div class="col-md-3 portfolio-item"></div> 
 
     <div class="col-md-3 portfolio-item"></div> 
 
     <div class="col-md-3 portfolio-item"></div> 
 
     <div class="col-md-3 portfolio-item"></div> 
 
    </div> 
 
</div>