ボタンを押したときの水平方向と垂直方向の目に見えないスクロール

Question

スクロールバーを非表示にし、ボタンを押したまま水平方向にスクロールすると、1つの列が目的の方向にスクロールします。

しかし、悲しいことに、それを動作させるように見えることはできません。

image

$('#left-button').click(function() { 
 
    event.preventDefault(); 
 
    $('.row-fluid').animate({ 
 
    scrollLeft: "+=200px" 
 
    }, "slow"); 
 
}); 
 

 
$('#right-button').click(function() { 
 
    event.preventDefault(); 
 
    $('.row-fluid').animate({ 
 
    scrollLeft: "-=200px" 
 
    }, "slow"); 
 
});

.row-fluid { 
 
    overflow: auto; 
 
    white-space: nowrap; 
 
} 
 

 
.row-fluid .col-lg-4 { 
 
    display: inline-block; 
 
    float: none; 
 
    overflow-y: scroll; 
 
    height: 700px; 
 
} 
 

 
.image-wrapper { 
 
    display: block; 
 
    width: 300px; 
 
    height: 200px; 
 
    background-color: black; 
 
    margin: 0 auto; 
 
    margin-bottom: 20px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container" style="overflow: auto"> 
 
    <div class="row"> 
 
    <a href="javascript:;" id="left-button">left</a> 
 
    <a href="javascript:;" id="right-button">right</a> 
 
    </div> 
 
    <div class="row-fluid"> 
 
    <div class="col-lg-4"> 
 
     <a href="" class="image-wrapper"></a> 
 
     <a href="" class="image-wrapper"></a> 
 
     <a href="" class="image-wrapper"></a> 
 
     <a href="" class="image-wrapper"></a> 
 
     <a href="" class="image-wrapper"></a> 
 
     <a href="" class="image-wrapper"></a> 
 
     <a href="" class="image-wrapper"></a> 
 
     <a href="" class="image-wrapper"></a> 
 
    </div> 
 
    <div class="col-lg-4"> 
 
     <a href="" class="image-wrapper"></a> 
 
     <a href="" class="image-wrapper"></a> 
 
     <a href="" class="image-wrapper"></a> 
 
     <a href="" class="image-wrapper"></a> 
 
     <a href="" class="image-wrapper"></a> 
 
     <a href="" class="image-wrapper"></a> 
 
     <a href="" class="image-wrapper"></a> 
 
     <a href="" class="image-wrapper"></a> 
 
    </div> 
 
    <div class="col-lg-4"> 
 
     <a href="" class="image-wrapper"></a> 
 
     <a href="" class="image-wrapper"></a> 
 
     <a href="" class="image-wrapper"></a> 
 
     <a href="" class="image-wrapper"></a> 
 
     <a href="" class="image-wrapper"></a> 
 
     <a href="" class="image-wrapper"></a> 
 
     <a href="" class="image-wrapper"></a> 
 
     <a href="" class="image-wrapper"></a> 
 
    </div> 
 
    <div class="col-lg-4"> 
 
     <a href="" class="image-wrapper"></a> 
 
     <a href="" class="image-wrapper"></a> 
 
     <a href="" class="image-wrapper"></a> 
 
     <a href="" class="image-wrapper"></a> 
 
     <a href="" class="image-wrapper"></a> 
 
     <a href="" class="image-wrapper"></a> 
 
     <a href="" class="image-wrapper"></a> 
 
     <a href="" class="image-wrapper"></a> 
 
    </div> 
 
    <div class="col-lg-4"> 
 
     <a href="" class="image-wrapper"></a> 
 
     <a href="" class="image-wrapper"></a> 
 
     <a href="" class="image-wrapper"></a> 
 
     <a href="" class="image-wrapper"></a> 
 
     <a href="" class="image-wrapper"></a> 
 
     <a href="" class="image-wrapper"></a> 
 
     <a href="" class="image-wrapper"></a> 
 
     <a href="" class="image-wrapper"></a> 
 
    </div> 
 
    <div class="col-lg-4"> 
 
     <a href="" class="image-wrapper"></a> 
 
     <a href="" class="image-wrapper"></a> 
 
     <a href="" class="image-wrapper"></a> 
 
     <a href="" class="image-wrapper"></a> 
 
     <a href="" class="image-wrapper"></a> 
 
     <a href="" class="image-wrapper"></a> 
 
     <a href="" class="image-wrapper"></a> 
 
     <a href="" class="image-wrapper"></a> 
 
    </div> 
 
    </div> 
 
</div>

私は最終的にそれが応答するためのブートストラップを使用したいPS。

Answer 1

私はこれをスライダー/カルーセルと考えるべきだと思います。

1. overflow-x: hidden; position: relativeのコンテナが必要です（階層的な順序で）。
2. コンテナ内を移動するコンテンツのラッパー（左右CSSプロパティのposition: absolute + jQuery animate、さらにはCSS transitions）。 >>これはあなたの例では.rowになりますが、.row-fluidは絶対配置されるので使用しないでください（.colの幅が詰まってしまいます）。

スライダーとカルーセルに関するオンラインコンテンツがたくさんあります。チェックアウトする必要があります。また、頭痛を完全に回避して、それを処理するJSライブラリを使用してください。

どんな意味でも、jQueryの.scroll()は左/右移動に依存しません。これはモバイルではうまく処理されません。

モバイルレイアウトから始めて、より大きなビューポートに拡張することをお勧めします。可能な限りシンプルなUXに焦点を絞ってください。

CSSブレイクポイントをいくつか扱う場合は、必ずしもこのためのブートストラップは必要ありません。

何かを明確にする必要がある場合はお知らせください。がんばろう！