2010-12-28 10 views
1

私は水平スクロールサイトを作成しています。憎むな! mousedownのmousemoveイベントをバインドするときは、dom scrollLeftプロパティが変更されていない限り、すべてうまく動作しているようです。適切な時に 'moving'と 'mouseup'の両方がコンソールに書き込まれます。ここに私のコードは... 編集:また、私は$( '#container')を書くと、mousedownのコンソールにscrollLeftを返し、値の代わりに 'function()'を返します。mousemoveとmousedownイベントをバインドする(jQuery)

$(document).ready(function() { 
    $('#container').mousedown(function(event) { 
     $(this) 
      .data('down',true) 
      .data('x',event.pageX) 
      .data('scrollLeft',this.scrollLeft) 
      .css({'cursor':'url("http://www.loodieloodieloodie.com/images/closedhand.cur"),auto'}); 
     $('body').bind('mousemove',function(event) { 
      console.log('moving'); 
      $('#container').scrollLeft = $('#container').data('scrollLeft') + ($('#container').data('x') - event.pageX) * 2; 
     }).bind('mouseup',function() { 
      $('#container') 
       .data('down',false) 
       .css({'cursor':'url("http://www.loodieloodieloodie.com/images/openhand.cur"),auto'}); 
      console.log('mouseup'); 
      $(this).unbind('mousemove'); 
     }); 
     return false; 
    }).css({ 
     'overflow':'hidden', 
     'cursor':'url("http://www.loodieloodieloodie.com/images/openhand.cur"),auto' 
    }); 
}); 

、ここでは基本的なHTMLです...助けを

<body> 
    <div id="container"> 
     <div id="inner"> 
      CONTENT 
     </div> 
    </div> 
</body> 

おかげで、 B

答えて

2

ありjQueryのオブジェクトには何の.scrollLeftプロパティがないので、代わりにTISの:

$('#container').scrollLeft = $('#container').data('scrollLeft') + ($('#container').data('x') - event.pageX) * 2; 

.scrollLeft()機能このような呼び出し:

$('#container').scrollLeft($('#container').data('scrollLeft') + ($('#container').data('x') - event.pageX) * 2); 

または.css()呼び出し、このような:

$('#container').css({ scrollLeft: $('#container').data('scrollLeft') + ($('#container').data('x') - event.pageX) * 2 }); 
+0

scrollLeftプロパティがあります...のhttp://api.jquery.com/scrollLeft/ 。私はちょうどそれを間違って使用していた – bflemi3

+2

@ user547071 - scrollLeft *関数*、はい、プロパティではありません:) –

+0

ああ、はい。あなたが正しい。あなたは私に正しい方向に考えさせました。助けてくれてありがとう、ニック。 – bflemi3

関連する問題