Skip to main content
1 of 2

I agree with the advice of AntK - especially about use strict only required once.

Another aspect to consider is that when applying CSS using .css() will alter the style attribute directly, which will cause a repaint and reflow1.

Instead of modifying the style attributes directly, add and remove classes. For example, the following CSS classes can be added:

.visible {
  visibility: visible;
}
.hidden {
  visibility: hidden;
}

And remove the visibility: hidden on .tab-scroller .prev. Then the logic in tab_switch() can be simplified using .toggleClass():

var nextVisible = scrolls.leftscrolled === 0 || scrolls.remaining !== 0;
var prevVisible = scrolls.remaining === 0 || scrolls.leftscrolled !== 0;
scrolls.scroll_next.toggleClass('visible', nextVisible).toggleClass('hidden', !nextVisible);
scrolls.scroll_prev.toggleClass('visible', prevVisible).toggleClass('hidden', !prevVisible);

See an updated fiddle here.


1https://ilikekillnerds.com/2015/02/stop-writing-slow-javascript/ - section Don't touch my DOM bro