Question

我有一个overflow:scroll的DIV，当我滚动div并且它到达底部时，它开始滚动主页面。

我希望不滚动主页 - 只是div。

这可能吗？

http://i.stack.imgur.com/Owuu0.png

图像显示了我不希望发生的事情

Answer 1

我为jQuery编写了这个小插件，现在正在使用它。它做你想要的，但不是CSS。也许这是一个解决方案：

(function($) {
    $.fn.privateScroll = function() {
        if ( this.length === 0 ) {
            return this;
        }
        this.bind('DOMMouseScroll mousewheel', function(e) {
                var delta = 0;
                if (typeof e.originalEvent.wheelDeltaY !== 'undefined') { // chrome, safari, opera
                    delta = e.originalEvent.wheelDeltaY;
                } else if (typeof e.originalEvent.wheelDelta !== 'undefined') { // ie
                    delta = e.originalEvent.wheelDelta;
                } else if (typeof e.originalEvent.detail != 'undefined') { // ff
                    delta = e.originalEvent.detail * -20;
                }
                if ( delta !== 0 ) {
                    $(this).scrollTop($(this).scrollTop() - delta );
                    e.preventDefault();
                    return false;
                }
        });
        return this;
    };
})(jQuery);

像这样使用：

jQuery('SELECTOR').privateScroll();

更新：使用同事代码更新以使用所有浏览器

Answer 2

尝试使用overflow: auto代替滚动，看看是否有效。

Answer 3

我没有对此进行测试，但我相信您可以使用此jquery代码来解决此问题。

$(document).ready(function() {
   $('INNER DIV SELECTOR').hover(function() {
      $('INNER DIV SELECTOR').scroll(function(e) {
         e.stopPropagation();
      });
   });
});

Answer 4

请查看以下网站以供参考：

http://manos.malihu.gr/tuts/custom-scrollbar-plugin/complete_examples.html

http://manos.malihu.gr/tuts/custom-scrollbar-plugin/nested_scrollbars_demo.html

CSS只滚动溢出div，而不是页面

4 个答案: