的 DEMO

Question

的 DEMO

问题：我正在使用 ScrollSection 插件＆amp;内部div滚动有问题。即在一个区域内有一个带滚动的div，但是当我将鼠标悬停在它上面以滚动div时，它会滚动页面。

我尝试了什么：我在scrollSection插件的核心文件中添加了一个全局布尔变量（名为disableScrollSectionMouseWheel），可以暂停它的鼠标滚轮功能，使用此开关，我添加了鼠标输入和离开div的事件，它确实停止了页面滚动，但没有打开div滚动!!。

顺便说一下，我在jsFiddle中创建了这个问题的简单版本，但后来我必须在 site 上将它与scroll-magic集成。

CODE：

$(function() {
    disableScrollSectionMouseWheel = 0;
    scrollSectionsController = $('section.scrollsections').scrollSections({
        speed: 2000,
        touch: false,
        mousewheel: true,
        exceptions: true,
        scrollMax: 1,
        exceptions: true,
        alwaysStartWithFirstSection: true,
        scrollbar: true
    });
    /* My Script To pause on hover */
    $('section.scrollsections .title').hover(function(e) {
        if ($(this).hasScrollBar()) {
            disableScrollSectionMouseWheel = 1;
        }
    });
    $('section.scrollsections .title').mouseleave(function(e) {
        disableScrollSectionMouseWheel = 0;
    });
});
(function($) {
    $.fn.hasScrollBar = function() {
        return this.get(0).scrollHeight > this.height();
    }
})(jQuery);

Answer 1

http://jsfiddle.net/tw7h1xkp/7/

1。插件会一直停止mousewheel事件，因此您需要添加检查变量的条件：

 if(disableScrollSectionMouseWheel) return;//line 455 in my fiddle

2。 .title没有滚动内容，但内部有p。因此，您需要将事件处理程序添加到p：

$('section.scrollsections .title p')

修改当用户滚动到p的底部或顶部时，您还需要重新启用该插件：

$('section.scrollsections .title p').on('scroll', function() { if($(this).scrollTop() + $(this).innerHeight() >= this.scrollHeight) { disableScrollSectionMouseWheel = 0; } if($(this).scrollTop() == 0) { disableScrollSectionMouseWheel = 0; } });

基于Detecting when user scrolls to bottom of div with jQuery

Scrollsection插件会停止内部滚动

的 DEMO

1 个答案: