10

これは、マウスホイールを使用した水平スクロールの実際の例ですが、スムーズにスクロールしません。スムーズとは、Firefox や Opera の通常の縦スクロールのようなものです。

$(function() {
    $("html, body").mousewheel(function(event, delta) {
        this.scrollLeft -= (delta * 30);
        event.preventDefault();
    });
});

( http://brandonaaron.net/code/mousewheel/docs )

これを実証するためにライブデモを作成しました。 http://jsfiddle.net/Dw4Aj/

マウスホイールと滑らかさの両方で、このスクロールを垂直スクロールのように機能させたいと思います。

誰かが私を助けることができますか？

4

8 に答える 8

3

スムーズ スクロールはブラウザ固有の機能です。

それらすべてで機能するものが必要な場合は、自分の側で行う必要があります。jQuery のスムーズ スクロールには複数の実装があります。

実際には、いわゆる動的スクロールが必要になる場合もあります。もしそうならjquery.kineticを試してみてください

于 2012-10-22T04:57:03.820 に答える
2

最初に、最後のスクロールイベントのタイムスタンプを覚えて、イージング関数で遊んで、良い結果を得ることができると思いますhttp://jsfiddle.net/oceog/Dw4Aj/13/

$(function() {

    $("html, body").mousewheel(function(event, delta) {
        var mult = 1;
        var $this = $(this);
        if (event.timeStamp - $this.data('oldtimeStamp') < 1000) {
            //calculate easing here
            mult = 1000 / (event.timeStamp - $this.data('oldtimeStamp'));
        }
        $this.data('oldtimeStamp', event.timeStamp);
        this.scrollLeft -= (delta) * mult;
        event.preventDefault();
    });
});​
于 2012-10-22T04:53:54.393 に答える
1

関数を .animate() と組み合わせて使用​​してみてください

$(function() {
    $("html, body").mousewheel(function(event, delta) {
        var scroll_distance = delta * 30
        this.animate(function(){
           left: "-=" + scroll_distance + "px",
        });
        event.preventDefault();
    });
});

私は実際にこれを自分でやっただけで、うまくいきます。作成した Web アプリケーションで Instagram フィードを作成しましたが、使用していた他のプラグインが頻繁に壊れていました。

$('#add_instagram').on('mousewheel', function(e,d){
    var delta = d*10;
    $('#move_this').animate({
        top: "-=" + delta + "px"
    },3);
    e.preventDefault();
});
于 2012-10-22T05:32:33.957 に答える
0

これを変更するだけです：

this.scrollLeft -= (delta * 30);

これに：

this.scrollLeft -= (delta * 1);
于 2016-07-07T07:58:50.673 に答える
0

私は他の素晴らしい解決策を見つけました-ラッパーを使用するため、垂直にスクロールするのと同じ位置に絶対にスクロールします。スクロールが必要な場合、テキストの選択などが必要ない場合に機能します(回避できるかもしれませんが、疲れました)

$(function() {

    var scroll = $('.scrollme');
    var h = scroll.parent().height();
    var w = scroll.parent().width();
    var t = scroll.offset().top;
    var l = scroll.offset().left;
    var vertscroll_wrap = $("<div>").height(h).width(10000).css('position', 'absolute').css('top', t).css('left', l).css('z-index', 10000).css('opacity', 0.5).css('overflow-y', 'scroll');
    var vertscroll = $('<div>').height(10000).css('width', '100%').css('opacity', 0.5);
    vertscroll_wrap.append(vertscroll);
    $('body').append(vertscroll_wrap);
    vertscroll_wrap.height('100%');
    vertscroll_wrap.scroll(function() {
        $(scroll).parent().scrollLeft($(this).scrollTop());
    });


});​

http://jsfiddle.net/oceog/Dw4Aj/16/

私は別のサンプルを作成しましたが、現在は全画面ラッパーなしで、 http://jsfiddle.net/oceog/DcyWD/を選択する可能性があります

于 2012-10-22T07:12:03.833 に答える
0

これだけは置いておきます。

http://jsfiddle.net/Dw4Aj/19/

jQuery(document).ready(function($) {
$("html, body").mousewheel(function(e, delta) { 
    $('html, body').stop().animate({scrollLeft: '-='+(150*delta)+'px' }, 200, 'easeOutQuint');
    e.preventDefault();
});

});
于 2012-11-10T03:39:01.113 に答える