响应水平JS滚动

Question

我已经创建了一个水平滚动，但我需要一些帮助我的javascript。 我想要的是，当我点击右键时，它应该与第二个盒子完美对齐，然后是第三个盒子，依此类推。我的javascript设置为滚动100px。但我希望它与其他盒子完美对齐。

重要！水平滚动将添加到响应式网站。所以我不能在这里使用px :)希望有人可以帮忙:)谢谢

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您必须检查元素的宽度和边距，然后添加到滚动条中。但警告，你的内容宽度必须是：盒子的数量X（盒子的宽度+边距）：

示例：6 x（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>