CODEWITHSUNDEEP
javascriptjqueryjquery-uijquery-ui-tabsjquery-tabs
Kevin Qian
Kevin Qian

Reputation: 23

jQuery UI Vertical Tabs makes page scroll "stick"

I am currently using the jQuery UI Vertical Tabs snippet out of the box, and there is a weird issue with how it affects the overall page scroll. Every time you change the tab, then try to scroll up or down the page main page, it ends up "sticking" in place for a little bit then works as normal. You can see the effect here: http://investors.realcrowd.com/tab-tester

Not sure what the problem is or how even to diagnose it...Is there any snippet of code I can add to fix this? Thanks for your help!

Upvotes: 2

Views: 826

Answers (1)

briosheje
briosheje

Reputation: 7446

Not 100% sure if that's the solution BUT, at such a point, I'm very confident it is.

Inspecting your source code, you have at the very beginning of your code a trigger. More specifically, it is located here:

<script>
$('body').bind('touchmove', function(e){
  e.preventDefault();
});
</script>
<script>
$(function() {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});

</script>

Right after including jQuery.

In this code piece, you actually have an handler that fires whenever a non-empty anchor is called. This event, after a few checks is going to call this:

$('html,body').animate({
              scrollTop: target.offset().top
            }, 1000);

Which is going to perform a 1 second animation (1000 milliseconds) that will scroll the view to the required target's top offset. In this second, if you're going to scroll, it is going to force you to be sticked at the top of the target's offset, therefore it will FORCE you to not scroll elsewhere but where he wants to.

To solve this, you can either set 1000 to 1, or just remove the animation, even if it's a good idea to actually scroll to the target's offset, therefore just replacing 1000 with 1 (or 10 or even 100) will be okay.

Hope this helps.

Upvotes: 1

Related Questions