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

您必须检查元素的宽度 和边距 并添加到滚动条。但警告，您在框中的内容宽度必须是:框的数量 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>