2

Windows8のMetroスタイルの水平スクロールに似たものを作成する必要があります。たとえば、ユーザーがマウスを隅に移動すると、スクローラーも一緒に移動します。

私はこのコードを試しました：

$(document).ready(function() {

    document.documentElement.onmousewheel = function (event) {
        $('body').scrollLeft($('body').scrollLeft() - event.wheelDelta);
    };
});

しかし、水平スクロールは私が期待するように完全には機能していません。

Windows 8スタイルの水平スクロールを作成するにはどうすればよいですか？

4

4 に答える 4

1

jqueryプラグインjcarouselを確認してください：

http://sorgalla.com/projects/jcarousel/examples/static_auto.html

于 2013-03-09T07:01:37.887 に答える
1

私は答えを見つけました：

水平スクロールを取得するには、Brandon Aaron（GitHub、ダウンロード）によるマウスホイールプラグインを使用して、キー押下などのマウスホイールの動きを検出します。もちろん、jQuery自体も使用されます。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="js/jquery.mousewheel.js"></script>

Javascript

$(document).ready(function() {
$('html, body, *').mousewheel(function(e, delta) {
    this.scrollLeft -= (delta * 40);
    e.preventDefault();
});
})

JavaScriptはHeadタグに追加するだけです。スクロールはhtml、body、*（すべて）に適用されることに注意してください。これにより、さまざまなブラウザーでスクロールできるようになります。event.preventDefault（）は、垂直スクロールを無効にするだけです。

于 2013-03-09T07:51:44.310 に答える
0

あなたはこのようなことをすることができます： HTML：

<div class="hScroll">
    <div class="content">
        <!-- your content -->
    </div>
</div>

CSS

.hScroll {
    position: relative;
    width: 99999em;
    height: 100%;
}
.content {
    position: relative;
    width: auto;
    height: 100%;
    float:left;
}

Javascript

$(document).ready(function (){
    $('.hScroll').width($('.content').outerWidth());
});
document.documentElement.onmousewheel = function (event) {
    $('body').scrollLeft($('body').scrollLeft() - event.wheelDelta);
    event.preventDefault();
};

例： http： //jsfiddle.net/JEX23/

于 2013-03-09T09:04:07.517 に答える
0

http://jscrollpane.kelvinluck.com/を試すことができ、水平方向と垂直方向の両方のスクロールをサポートし、スタイル設定が簡単で、さまざまなイージングトランジションをサポートします。

于 2013-03-09T07:34:15.933 に答える