Событие jQuery scroll() не распространяется

У меня есть один плагин wordpress, который отображает всплывающее окно. Поэтому у меня есть код:Событие jQuery scroll() не распространяется

jQuery(window).scroll(function(){ 
    //display popup 
});

У меня проблема с одним сайтом. На сайте есть эти правила CSS:

html, body { 
    overflow: hidden; 
} 

div#pageWrap { 
    overflow: scroll; 
    -webkit-overflow-scrolling: touch; 
}

Так свитка события не запускающие на окне и мое всплывающее окно не работает. Так что в этом случае я должен установить событие прокрутки #pageWrap вместо этого на деление с окном, так как событие прокрутки не распространяется:

jQuery("#pageWrap").scroll(function(){ 
    //display popup 
});

Мой вопрос я могу справиться с этим dinamicaly. Я не могу изменить код моего плагина для каждого сайта, где у меня есть эта проблема. Возможно сделать что-то вроде make scroll event для распространения или установить некоторый отказ. Любая идея об этом будет полезна.

источник

2015-02-13 masacenje

#pageWrap и окно являются единственными параметрами? нет другого варианта, с которым вам нужно иметь дело? –

Нет, это только один пример, когда у меня возникла проблема. Любая другая оболочка может быть настроена на переполнение: прокрутка; Дело в том, что мне нужно показать свое всплывающее окно, когда пользователь прокручивает 80% страницы. Поэтому, когда есть такие правила css, как этот, прокрутка не работает в окне, поэтому мне нужно динамически находить, какой элемент прокручивается или устанавливать прокрутку для распространения, или любое другое решение, чтобы показать свое всплывающее окно после прокрутки 80%. – masacenje

. 'overflow: hidden 'в элементах html и body, когда намерение позволяет прокручивать пользователей? В худшем случае динамическое изменение значения переполнения происходит так: '$ ('html, body'). Css ('overflow', 'auto')' перед прикреплением события прокрутки. – istos

Я не могу пообещать, что в этом будут размещены все кромки, но он должен позаботиться о большинстве из них.

JS:

jQuery.fn['any'] = function() { 
    return (this.length > 0); 
}; 

if (jQuery("html").css('overflow') == 'hidden') { 
    if (jQuery("body").css('overflow') == 'hidden') { 
     var scrollElement = jQuery('*').filter(function() { return jQuery(this).css('overflow') == 'scroll'; }); 
     if (!scrollElement.any()) { 
      var scrollElement = jQuery('*').filter(function() { return jQuery(this).css('overflow-y') == 'scroll'; }); 
      jQuery(scrollElement[0]).scroll(function(){ 
       //display popup 
      }); 
     } 
     else { 
      jQuery(scrollElement[0]).scroll(function(){ 
       //display popup 
      }); 
     } 
    } 
    else { 
     jQuery("body").scroll(function(){ 
      //display popup 
     }); 
    } 
} 
else { 
    jQuery(window).scroll(function(){ 
     //display popup 
    }); 
}

https://jsfiddle.net/hopkins_matt/d0gtqkat/

источник

2015-02-15 02:06:27

Я не думаю, что есть глобальное решение этой проблемы, но, может быть, вы найдете некоторые близкие решения.

Близкое решение в моем уме состоит в том, чтобы найти элемент div, который имеет (overflow = 'scroll'), а его ширина и высота очень близки к ширине и высоте окна.

Если вы обнаружили более одного div, то вам нужно иметь дело с самым глубоким div в DOM.

Если вы не нашли такого div, то вы имеете дело с jQuery (window).

источник

2015-02-15 09:31:22

Событие jQuery scroll() не распространяется

ответ

Смежные вопросы