web-dev-qa-db-ja.com

jqueryマウスホイール

Mousewheeljqueryプラグインを使用してdivのコンテンツをスクロールしたいと思います。私はこれを持っていますが、機能していません。何かご意見は？

$(function() {
$('#contentBox').bind('mousewheel', function(event, delta) {
   if (delta > 0) {
        $('#contentBox').css('top', parseInt($('#contentBox').css('top'))+40);
    } else {
        $('#contentBox').css('top', parseInt($('#contentBox').css('top'))-40);
    }
  return false;
}); 
});
jquerymousewheel
10
user520300

推測です：CSS値に+ 'px'を追加すると問題は解決しますか？実際、「メディア」とは何を指しているのでしょうか。

[〜＃〜]更新[〜＃〜]

OK、コードをテストする機会がありましたが、CSSが適切に設定されていれば、すべて問題ないようです。 #contentBoxのtopに実際に値を割り当てましたか？既存の値がない場合、parseInt($('#contentBox').css('top'))はNaNを返します。これが私が使用したコードです：

$(function() {
    $('#contentBox').bind('mousewheel', function(event, delta) {

        $('#contentBox').css('top', parseInt($('#contentBox').css('top')) + (delta > 0 ? 40 : -40));

        return false;
    });
});

#contentBox { height: 4em; background-color: #eee; border: 1px solid #ccc; position: absolute; top: 100px; width: 200px; }

<div id="contentBox"></div>

三項演算子を使用してコードを少し単純化/縮小しましたが、これはこの回答のサイズを少し小さくするためのものであり、完全にオプションであることに注意してください。また、そこでテストCSSを使用して、自分が何をしているかを確認しました。あなたは違うと確信しています！

7
Bobby Jack
$('#contentBox').bind('mousewheel DOMMouseScroll', function(event) {
  event.preventDefault();
  var delta = event.wheelDelta || -event.detail;
  $(this).css({'top': $(this).position().top + (delta > 0 ? '+=40' : '-=40')});
});

http://www.adomas.org/javascript-mouse-wheel/

15
ruvan

JQuery 1.6を使用している場合は、次のように記述できます。

$('#contentBox').css('top','+=40');

そしてそれを忘れてください。

もちろん、#contentBoxが絶対位置にあることを適切に宣言するには、CSSが必要です。

3
Simone Gianni