-3

All of the JS codes are working,including other jquery libraries. Just this one isn't,but the weird part is,no errors reported in console. Is it maybe becuase of offset property? PS. Works great in Edge and Chrome,so I guess it must be my mistake,but I just don't know what. PS2. I am sorry that my code is a bit longer,it is actually a code from here,stackoverflow.

// set to true to see the console.log debug info
var debug = false;

// setup default index of 0
var index = 0;

// setup scrolling flag
var scrolling = false;

// cache a few elements for reference
var win = $(window);
var body = $('body');
var container = $('.container');

// setup a few more variables for future use
var lastTop = 0;
var current, offset;

// bind scroll event
win.on('scroll', function(ev) {
  // prevent the default event
  ev.preventDefault();
  // check to make sure we don't fire the scroll multiple times
  if (debug) console.log(scrolling, 'scrolling');
  if (scrolling) return;

  // set the scrolling flag to true
  scrolling = true;

  // run the update function
  updateActive();

  // clear the scrolling flag to allow the user to access the next element
  setTimeout(function() {
    scrolling = false;
  }, 500);

  // update a few variables for the next interaction
  current = container.find('.inner[data-index=' + index + ']');
  offset = current.offset();
  lastTop = offset.top;

  // handle the animation
  body.animate({
    scrollTop: offset.top + 'px'
  });

});

function updateActive() {
  // get the current top offset
  var top = win.scrollTop();
  // determine which direction we are scrolling
  if (top > lastTop) {
    // down
    if (debug) console.log('scrolling down');
    // let make sure we aren't on the last element
    if (debug) console.log(index, $('.inner').length);
    if (index == $('.inner').length) {
      if (debug) console.log('on last element, nothing to do');
      return;
    }

    // update index & top
    if (debug) console.log(index, 'index before');
    index++;
    if (debug) console.log(index, 'index after');
    lastTop = top;

  } else {
    // up
    if (debug) console.log('scrolling up');
    // let make sure we aren't on the first element
    if (!index) {
      if (debug) console.log('on first element, nothing to do');
      return;
    }

    // update index & top
    if (debug) console.log(index, 'index before');
    index--;
    if (debug) console.log(index, 'index after');
    lastTop = top;

  }
}
Patrick Roberts
  • 49,224
  • 10
  • 102
  • 153
Milos
  • 1
  • 4
  • 1
    Could you fix your indentation please? It will make your code easier to read. It would also help if you would put this into a runnable code snippet (here or maybe on jsfiddle) so people can try it out in different browsers and help you debug. – user94559 Jul 26 '17 at 18:31
  • 3
    What is this code supposed to do, and what is it not doing? "Not working" is not very helpful. http://importblogkit.com/2015/07/does-not-work/ – Paul Abbott Jul 26 '17 at 18:34
  • @smarx My apologies,english is not my first language.I will put it on jsdiddle right away. – Milos Jul 26 '17 at 18:35
  • @PaulAbbott So,it actually is full page scrolling.The difference between Chrome and Firefox is that on Chrome it works like a swiss clock.On firefox,it is just normal scrolling. – Milos Jul 26 '17 at 18:36
  • https://jsfiddle.net/vr2jk1p2/ @smarx – Milos Jul 26 '17 at 18:52
  • @PaulAbbott https://jsfiddle.net/vr2jk1p2/ – Milos Jul 26 '17 at 18:52

1 Answers1

0

Per Animate scrollTop not working in firefox, you need to animate the 'html' element in Firefox:

$('body,html').animate(...);

See https://jsfiddle.net/vr2jk1p2/1/ for a fixed version.

user94559
  • 59,196
  • 6
  • 103
  • 103
  • Wow,thank you so much. Again,I apologize for not posting very good explanation of my question.English is not my first language and I am a beginner in javascript.Thank you so much,kind sir. – Milos Jul 26 '17 at 19:17