响应式水平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>