レスポンシブル水平JSスクロール

Question

横スクロールを作成しましたが、私のjavascriptのヘルプが必要です。 私が望むのは、右のボタンをクリックすると、2番目のボックスと3番目のボックスに完全に揃うはずです。私のjavascriptは100pxのスクロールに設定されています。しかし、私はそれが他のボックスと完全に揃うようにしたい。

重要！レスポンシブウェブサイトに水平スクロールが追加されます。だから私はここにピクセルを使用傾ける:)希望誰かが:)おかげ

$(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×（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>

下回ってみてください。