jQuery-不可滚动div上的Scroll事件 [英] Jquery - Scroll event on a non scrollable div

问题描述

示例: http://jsbin.com/ofifiy/2 /edit#preview

我尝试使用不可滚动的div(绿色)滚动div(红色). 我的问题是，当我在绿色div上滚动时，jQuery scroll()不会触发.

HTML

<div id="targetWithNoScroll" style="border:1px solid #0f0;  width:100px; height:100px;">
    scroll here = scroll the red div<br />   
  </div>

JS

$('#targetWithNoScroll').scroll(function() {
  $('body').append('No scroll <br />');
});

解决方案

您需要将mousewheel事件绑定到该div. 不幸的是，没有原生的jQuery mousewheel事件，因此您必须选择一个插件或自己编写.但我建议您选择其中一种，因为这样可以节省很多时间:

http://brandonaaron.net/code/mousewheel/demos/

http://css-tricks.com/snippets/jquery/horz-鼠标滚轮/

http://www.ogonek.net/mousewheel/jquery-demo.html

example: http://jsbin.com/ofifiy/2/edit#preview

i try to scroll a div (red one) with a non scrollable div (green one). My problem is, when i scroll on the green div, the jquery scroll() does not fire.

HTML

<div id="targetWithNoScroll" style="border:1px solid #0f0;  width:100px; height:100px;">
    scroll here = scroll the red div<br />   
  </div>

JS

$('#targetWithNoScroll').scroll(function() {
  $('body').append('No scroll <br />');
});

解决方案

You need to bind the mousewheel event to that div. Unfortunately there is no native jQuery mousewheel event, so you have to pick a plugin or write it yourself. But I would recommend taking one of these as it saves you a lot of time:

http://brandonaaron.net/code/mousewheel/demos/

http://css-tricks.com/snippets/jquery/horz-scroll-with-mouse-wheel/

http://www.ogonek.net/mousewheel/jquery-demo.html

这篇关于jQuery-不可滚动div上的Scroll事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！