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);
###Update I guess altering the class instead of the style still causes a reflow, but it should hopefully keep the display logic (i.e. CSS) out of the javascript...
1https://ilikekillnerds.com/2015/02/stop-writing-slow-javascript/ - section Don't touch my DOM bro