横スクロールでスクロールホイールを使用する

Question

ウェブデザインは比較的新しいものです。私は自分のデザインでPHP、HTML、CSS、JQueryを使用しています。 イメージをインラインブロックとしてスクロールするイメージビューアを作成しました。垂直スクロールバーを決して使用しないように、高さはスクリーンの100％に固定されています。私はx方向のスクロールを許可しているので、ユーザーは画像を水平方向にスクロールすることができます。

このすべては機能しますが、スクロールホイールは何もしません。とにかく、私はマウスから垂直スクロール入力を水平スクロールに変換できるのですか？

CSS：

.photoViewer { 
    white-space: nowrap; 
    height: 100%; 
    overflow-x: scroll; 
    overflow-y: hidden; 
    padding-top: 50px; 

} 

.photoViewer li { 

    display: inline-block; 
    height: 100%; 
    padding: 0; 
} 

.photoViewer li img{ 
    height: 100% ; 
    width: auto; 
    margin-right: 10px; 
} 

Answer 1

あなたは、これがjQuery Mousewheel呼ば達成を助けることができるjQueryプラグインがあります。 CSSのトリックからクリスCoyierは、基本的にX軸スクロールにスクロールY軸を変換した彼の例hereでそれを使用：

// Code by Chris Coyier 
$(function() { 
    $("body").mousewheel(function(event, delta) { 
     this.scrollLeft -= (delta * 30); 
     event.preventDefault(); 
    }); 
}); 

Answer 2

あなたはwheelイベントを使用してX.基本的に

にdeltaY移動を翻訳することができます

$(".inner").on("wheel", function() { 
    var outer = $(this).closest(".outer"); 
    outer.scrollLeft(outer.scrollLeft() + e.originalEvent.deltaY); 
    e.preventDefault(); 
}); 

しかし、これは少し跳ね上がるので、アニメーションテストを追加することができます。アニメーションテストを追加するには、あまりにも長いアニメーション時間のため、これは非常に厄介です。したがって、exta .stop()です。

CSSのトランジションを使用して、より良いアニメーション/スムーススクロールを実現できます。

$("#inner").on("wheel", function(e) { 
 
    var outer = $(this).closest("#outer") 
 
    //outer.scrollLeft(outer.scrollLeft() + e.originalEvent.deltaY) 
 
    outer.stop(false,false).animate({scrollLeft:"+="+e.originalEvent.deltaY}, 50) 
 
    e.preventDefault(); 
 
});

#outer { 
 
    display:block; 
 
    width:200px; 
 
    height:100px; 
 
    overflow-y:hidden; 
 
    overflow-x:scroll; 
 
    border:1px solid red 
 
} 
 
#inner { 
 
    display:block; 
 
    width: 500px; 
 
    height:100px; 
 
    border:1px solid blue; 
 
    background: blue; 
 
    background: -webkit-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet); 
 
    background: -o-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet); 
 
    background: -moz-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet); 
 
    background: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id='outer'> 
 
<div id='inner'> 
 
</div> 
 
</div>

（それは非標準だと明らかにmousehweelを使用していない - それはjqueryのは、あなたのためにこれを処理することができます）。