最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Scroll event never fires and .scrollTop() always returns 0 because of wrapper DIV - Stack Overflow

programmeradmin7浏览0评论

Basically what I'm trying to do is use a on scroll event and use jquery scrollTop() while using this [off-canvas menu][1]

Here's a fiddle! /

Here's the code that isn't working as expected: (The scroll event never fires and scrollTop() always returns as 0)

$( window ).on('scroll', function() {
  console.log($(window).scrollTop());
  console.log('scrolling!');
});

My understanding is that because the off-canvas menu uses a relatively positioned wrapper div, the scroll event never fires because $(window).scrollTop() always returns zero.

How can I make a scroll event work and use scrollTop() ?

Basically what I'm trying to do is use a on scroll event and use jquery scrollTop() while using this [off-canvas menu][1]

Here's a fiddle! http://jsfiddle/k6hsvp1a/

Here's the code that isn't working as expected: (The scroll event never fires and scrollTop() always returns as 0)

$( window ).on('scroll', function() {
  console.log($(window).scrollTop());
  console.log('scrolling!');
});

My understanding is that because the off-canvas menu uses a relatively positioned wrapper div, the scroll event never fires because $(window).scrollTop() always returns zero.

How can I make a scroll event work and use scrollTop() ?

Share Improve this question edited Oct 20, 2014 at 16:46 Chava Sobreyra asked Oct 20, 2014 at 15:31 Chava SobreyraChava Sobreyra 8611 gold badge9 silver badges21 bronze badges 3
  • create a fiddle please – Jonas Grumann Commented Oct 20, 2014 at 15:39
  • scroll what? scrollTop of what? Question is far too vague. Where's your code attempt that isn't working? – charlietfl Commented Oct 20, 2014 at 15:49
  • Sorry guys, I added a fiddle and some clarification! – Chava Sobreyra Commented Oct 20, 2014 at 16:14
Add a ment  | 

2 Answers 2

Reset to default 7

Debugging time... this is a little heavy handed, but worked in this scenario:

$("*").on('scroll', function() {
  console.log($(this));
});

The "*" applies to all elements.

Checked out the console:

[div.st-content, context: div.st-content, jquery: "1.9.1", constructor: function, init: function, selector: ""…]

So our scroll event is being triggered by .st-content

$(".st-content").on('scroll', function() {
  console.log($(this).scrollTop());
  console.log("scrolling");
});

Your fiddle is fiddling with the wrong container. Check my update here:

http://jsfiddle/k6hsvp1a/1/

This is the difference:

$( '.st-content' ).on('scroll', function() {
  console.log($('.st-content').scrollTop());
  console.log('scrolling!');
});

Every block element can scroll independently if its contents are larger than its dimensions and set to overflow: scroll (or overflow: auto (or overflow-y or... you get the point)).

The scroll event then fires on the actual div that's scrolling, and doesn't bubble up to the window. (https://developer.mozilla/en-US/docs/Web/Events/scroll)

What's also confusing is that this div in particular also happens to take up the whole window, so it looks like it's the window that's scrolling.

发布评论

评论列表(0)

  1. 暂无评论