PageSourceSearch

https://caferomanticoradio.com/assets/smooth-scroll/SmoothScroll.js

js caferomanticoradio.com collected 2026-10-08 08:03:31 UTC 21,418 bytes, 749 lines download raw bytes

1//
2// SmoothScroll for websites v1.4.5 (Balazs Galambosi)
3// http://www.smoothscroll.net/
4//
5// Licensed under the terms of the MIT license.
6//
7// You may use it in your theme if you credit me.
8// It is also free to use on any individual website.
9//
10// Exception:
11// The only restriction is to not publish any
12// extension for browsers or native application
13// without getting a written permission first.
14//
15
16(function () {
17
18// Scroll Variables (tweakable)
19var defaultOptions = {
20
21    // Scrolling Core
22    frameRate        : 150, // [Hz]
23    animationTime    : 400, // [ms]
24    stepSize         : 100, // [px]
25
26    // Pulse (less tweakable)
27    // ratio of "tail" to "acceleration"
28    pulseAlgorithm   : true,
29    pulseScale       : 4,
30    pulseNormalize   : 1,
31
32    // Acceleration
33    accelerationDelta : 50,  // 50
34    accelerationMax   : 3,   // 3
35
36    // Keyboard Settings
37    keyboardSupport   : true,  // option
38    arrowScroll       : 50,    // [px]
39
40    // Other
41    touchpadSupport   : false, // ignore touchpad by default
42    fixedBackground   : true,
43    excluded          : ''
44};
45
46var options = defaultOptions;
47
48
49// Other Variables
50var isExcluded = false;
51var isFrame = false;
52var direction = { x: 0, y: 0 };
53var initDone  = false;
54var root = document.documentElement;
55var activeElement;
56var observer;
57var refreshSize;
58var deltaBuffer = [];
59var isMac = /^Mac/.test(navigator.platform);
60
61var key = { left: 37, up: 38, right: 39, down: 40, spacebar: 32,
62            pageup: 33, pagedown: 34, end: 35, home: 36 };
63var arrowKeys = { 37: 1, 38: 1, 39: 1, 40: 1 };
64
65/***********************************************
66 * INITIALIZE
67 ***********************************************/
68
69/**
70 * Tests if smooth scrolling is allowed. Shuts down everything if not.
71 */
72function initTest() {
73    if (options.keyboardSupport) {
74        addEvent('keydown', keydown);
75    }
76}
77
78/**
79 * Sets up scrolls array, determines if frames are involved.
80 */
81function init() {
82
83    if (initDone || !document.body) return;
84
85    initDone = true;
86
87    var body = document.body;
88    var html = document.documentElement;
89    var windowHeight = window.innerHeight;
90    var scrollHeight = body.scrollHeight;
91
92    // check compat mode for root element
93    root = (document.compatMode.indexOf('CSS') >= 0) ? html : body;
94    activeElement = body;
95
96    initTest();
97
98    // Checks if this script is running in a frame
99    if (top != self) {
100        isFrame = true;
101    }
102
103    /**
104     * Safari 10 fixed it, Chrome fixed it in v45:
105     * This fixes a bug where the areas left and right to
106     * the content does not trigger the onmousewheel event
107     * on some pages. e.g.: html, body { height: 100% }
108     */
109    else if (isOldSafari &&
110             scrollHeight > windowHeight &&
111            (body.offsetHeight <= windowHeight ||
112             html.offsetHeight <= windowHeight)) {
113
114        var fullPageElem = document.createElement('div');
115        fullPageElem.style.cssText = 'position:absolute; z-index:-10000; ' +
116                                     'top:0; left:0; right:0; height:' +
117                                      root.scrollHeight + 'px';
118        document.body.appendChild(fullPageElem);
119
120        // DOM changed (throttled) to fix height
121        var pendingRefresh;
122        refreshSize = function () {
123            if (pendingRefresh) return; // could also be: clearTimeout(pendingRefresh);
124            pendingRefresh = setTimeout(function () {
125                if (isExcluded) return; // could be running after cleanup
126                fullPageElem.style.height = '0';
127                fullPageElem.style.height = root.scrollHeight + 'px';
128                pendingRefresh = null;
129            }, 500); // act rarely to stay fast
130        };
131
132        setTimeout(refreshSize, 10);
133
134        addEvent('resize', refreshSize);
135
136        // TODO: attributeFilter?
137        var config = {
138            attributes: true,
139            childList: true,
140            characterData: false
141            // subtree: true
142        };
143
144        observer = new MutationObserver(refreshSize);
145        observer.observe(body, config);
146
147        if (root.offsetHeight <= windowHeight) {
148            var clearfix = document.createElement('div');
149            clearfix.style.clear = 'both';
150            body.appendChild(clearfix);
151        }
152    }
153
154    // disable fixed background
vendor: 5,419 bytes, lines 155-357
155    if (!options.fixedBackground && !isExcluded) {
156        body.style.backgroundAttachment = 'scroll';
157        html.style.backgroundAttachment = 'scroll';
158    }
159}
160
161/**
162 * Removes event listeners and other traces left on the page.
163 */
164function cleanup() {
165    observer && observer.disconnect();
166    removeEvent(wheelEvent, wheel);
167    removeEvent('mousedown', mousedown);
168    removeEvent('keydown', keydown);
169    removeEvent('resize', refreshSize);
170    removeEvent('load', init);
171}
172
173
174/************************************************
175 * SCROLLING
176 ************************************************/
177
178var que = [];
179var pending = false;
180var lastScroll = Date.now();
181
182/**
183 * Pushes scroll actions to the scrolling queue.
184 */
185function scrollArray(elem, left, top) {
186
187    directionCheck(left, top);
188
189    if (options.accelerationMax != 1) {
190        var now = Date.now();
191        var elapsed = now - lastScroll;
192        if (elapsed < options.accelerationDelta) {
193            var factor = (1 + (50 / elapsed)) / 2;
194            if (factor > 1) {
195                factor = Math.min(factor, options.accelerationMax);
196                left *= factor;
197                top  *= factor;
198            }
199        }
200        lastScroll = Date.now();
201    }
202
203    // push a scroll command
204    que.push({
205        x: left,
206        y: top,
207        lastX: (left < 0) ? 0.99 : -0.99,
208        lastY: (top  < 0) ? 0.99 : -0.99,
209        start: Date.now()
210    });
211
212    // don't act if there's a pending queue
213    if (pending) {
214        return;
215    }
216
217    var scrollWindow = (elem === document.body);
218
219    var step = function (time) {
220
221        var now = Date.now();
222        var scrollX = 0;
223        var scrollY = 0;
224
225        for (var i = 0; i < que.length; i++) {
226
227            var item = que[i];
228            var elapsed  = now - item.start;
229            var finished = (elapsed >= options.animationTime);
230
231            // scroll position: [0, 1]
232            var position = (finished) ? 1 : elapsed / options.animationTime;
233
234            // easing [optional]
235            if (options.pulseAlgorithm) {
236                position = pulse(position);
237            }
238
239            // only need the difference
240            var x = (item.x * position - item.lastX) >> 0;
241            var y = (item.y * position - item.lastY) >> 0;
242
243            // add this to the total scrolling
244            scrollX += x;
245            scrollY += y;
246
247            // update last values
248            item.lastX += x;
249            item.lastY += y;
250
251            // delete and step back if it's over
252            if (finished) {
253                que.splice(i, 1); i--;
254            }
255        }
256
257        // scroll left and top
258        if (scrollWindow) {
259            window.scrollBy(scrollX, scrollY);
260        }
261        else {
262            if (scrollX) elem.scrollLeft += scrollX;
263            if (scrollY) elem.scrollTop  += scrollY;
264        }
265
266        // clean up if there's nothing left to do
267        if (!left && !top) {
268            que = [];
269        }
270
271        if (que.length) {
272            requestFrame(step, elem, (1000 / options.frameRate + 1));
273        } else {
274            pending = false;
275        }
276    };
277
278    // start a new queue of actions
279    requestFrame(step, elem, 0);
280    pending = true;
281}
282
283
284/***********************************************
285 * EVENTS
286 ***********************************************/
287
288/**
289 * Mouse wheel handler.
290 * @param {Object} event
291 */
292function wheel(event) {
293
294    if (!initDone) {
295        init();
296    }
297
298    var target = event.target;
299
300    // leave early if default action is prevented
301    // or it's a zooming event with CTRL
302    if (event.defaultPrevented || event.ctrlKey) {
303        return true;
304    }
305
306    // leave embedded content alone (flash & pdf)
307    if (isNodeName(activeElement, 'embed') ||
308       (isNodeName(target, 'embed') && /\.pdf/i.test(target.src)) ||
309        isNodeName(activeElement, 'object') ||
310        target.shadowRoot) {
311        return true;
312    }
313
314    var deltaX = -event.wheelDeltaX || event.deltaX || 0;
315    var deltaY = -event.wheelDeltaY || event.deltaY || 0;
316
317    if (isMac) {
318        if (event.wheelDeltaX && isDivisible(event.wheelDeltaX, 120)) {
319            deltaX = -120 * (event.wheelDeltaX / Math.abs(event.wheelDeltaX));
320        }
321        if (event.wheelDeltaY && isDivisible(event.wheelDeltaY, 120)) {
322            deltaY = -120 * (event.wheelDeltaY / Math.abs(event.wheelDeltaY));
323        }
324    }
325
326    // use wheelDelta if deltaX/Y is not available
327    if (!deltaX && !deltaY) {
328        deltaY = -event.wheelDelta || 0;
329    }
330
331    // line based scrolling (Firefox mostly)
332    if (event.deltaMode === 1) {
333        deltaX *= 40;
334        deltaY *= 40;
335    }
336
337    var overflowing = overflowingAncestor(target);
338
339    // nothing to do if there's no element that's scrollable
340    if (!overflowing) {
341        // except Chrome iframes seem to eat wheel events, which we need to
342        // propagate up, if the iframe has nothing overflowing to scroll
343        if (isFrame && isChrome)  {
344            // change target to iframe element itself for the parent frame
345            Object.defineProperty(event, "target", {value: window.frameElement});
346            return parent.wheel(event);
347        }
348        return true;
349    }
350
351    // check if it's a touchpad scroll that should be ignored
352    if (!options.touchpadSupport && isTouchpad(deltaY)) {
353        return true;
354    }
355
356    // scale by step size
357    // delta is 120 most of the time
358    // synaptics seems to send 1 sometimes
359    if (Math.abs(deltaX) > 1.2) {
360        deltaX *= options.stepSize / 120;
361    }
362    if (Math.abs(deltaY) > 1.2) {
363        deltaY *= options.stepSize / 120;
364    }
365
366    scrollArray(overflowing, deltaX, deltaY);
367    event.preventDefault();
368    scheduleClearCache();
369}
370
371/**
372 * Keydown event handler.
373 * @param {Object} event
374 */
375function keydown(event) {
376
377    var target   = event.target;
378    var modifier = event.ctrlKey || event.altKey || event.metaKey ||
379                  (event.shiftKey && event.keyCode !== key.spacebar);
380
381    // our own tracked active element could've been removed from the DOM
382    if (!document.body.contains(activeElement)) {
383        activeElement = document.activeElement;
384    }
385
386    // do nothing if user is editing text
387    // or using a modifier key (except shift)
388    // or in a dropdown
389    // or inside interactive elements
390    var inputNodeNames = /^(textarea|select|embed|object)$/i;
391    var buttonTypes = /^(button|submit|radio|checkbox|file|color|image)$/i;
392    if ( event.defaultPrevented ||
393         inputNodeNames.test(target.nodeName) ||
394         isNodeName(target, 'input') && !buttonTypes.test(target.type) ||
395         isNodeName(activeElement, 'video') ||
396         isInsideYoutubeVideo(event) ||
397         target.isContentEditable ||
398         modifier ) {
399      return true;
400    }
401
402    // [spacebar] should trigger button press, leave it alone
403    if ((isNodeName(target, 'button') ||
404         isNodeName(target, 'input') && buttonTypes.test(target.type)) &&
405        event.keyCode === key.spacebar) {
406      return true;
407    }
408
409    // [arrwow keys] on radio buttons should be left alone
410    if (isNodeName(target, 'input') && target.type == 'radio' &&
411        arrowKeys[event.keyCode])  {
412      return true;
413    }
414
415    var shift, x = 0, y = 0;
416    var overflowing = overflowingAncestor(activeElement);
417
418    if (!overflowing) {
419        // Chrome iframes seem to eat key events, which we need to
420        // propagate up, if the iframe has nothing overflowing to scroll
421        return (isFrame && isChrome) ? parent.keydown(event) : true;
422    }
423
424    var clientHeight = overflowing.clientHeight;
425
426    if (overflowing == document.body) {
427        clientHeight = window.innerHeight;
428    }
429
430    switch (event.keyCode) {
431        case key.up:
432            y = -options.arrowScroll;
433            break;
434        case key.down:
435            y = options.arrowScroll;
436            break;
437        case key.spacebar: // (+ shift)
438            shift = event.shiftKey ? 1 : -1;
439            y = -shift * clientHeight * 0.9;
440            break;
441        case key.pageup:
442            y = -clientHeight * 0.9;
443            break;
444        case key.pagedown:
445            y = clientHeight * 0.9;
446            break;
447        case key.home:
448            y = -overflowing.scrollTop;
449            break;
450        case key.end:
451            var scroll = overflowing.scrollHeight - overflowing.scrollTop;
452            var scrollRemaining = scroll - clientHeight;
453            y = (scrollRemaining > 0) ? scrollRemaining + 10 : 0;
454            break;
455        case key.left:
456            x = -options.arrowScroll;
457            break;
458        case key.right:
459            x = options.arrowScroll;
460            break;
461        default:
462            return true; // a key we don't care about
463    }
464
465    scrollArray(overflowing, x, y);
466    event.preventDefault();
467    scheduleClearCache();
468}
469
470/**
471 * Mousedown event only for updating activeElement
472 */
473function mousedown(event) {
474    activeElement = event.target;
475}
476
477
478/***********************************************
479 * OVERFLOW
480 ***********************************************/
481
482var uniqueID = (function () {
483    var i = 0;
484    return function (el) {
485        return el.uniqueID || (el.uniqueID = i++);
486    };
487})();
488
489var cache = {}; // cleared out after a scrolling session
490var clearCacheTimer;
491
492//setInterval(function () { cache = {}; }, 10 * 1000);
493
494function scheduleClearCache() {
495    clearTimeout(clearCacheTimer);
496    clearCacheTimer = setInterval(function () { cache = {}; }, 1*1000);
497}
498
499function setCache(elems, overflowing) {
500    for (var i = elems.length; i--;)
501        cache[uniqueID(elems[i])] = overflowing;
502    return overflowing;
503}
504
505//  (body)                (root)
506//         | hidden | visible | scroll |  auto  |
507// hidden  |   no   |    no   |   YES  |   YES  |
508// visible |   no   |   YES   |   YES  |   YES  |
509// scroll  |   no   |   YES   |   YES  |   YES  |
510// auto    |   no   |   YES   |   YES  |   YES  |
511
512function overflowingAncestor(el) {
513    var elems = [];
514    var body = document.body;
515    var rootScrollHeight = root.scrollHeight;
516    do {
517        var cached = cache[uniqueID(el)];
518        if (cached) {
519            return setCache(elems, cached);
520        }
521        elems.push(el);
522        if (rootScrollHeight === el.scrollHeight) {
523            var topOverflowsNotHidden = overflowNotHidden(root) && overflowNotHidden(body);
524            var isOverflowCSS = topOverflowsNotHidden || overflowAutoOrScroll(root);
525            if (isFrame && isContentOverflowing(root) ||
526               !isFrame && isOverflowCSS) {
527                return setCache(elems, getScrollRoot());
528            }
529        } else if (isContentOverflowing(el) && overflowAutoOrScroll(el)) {
530            return setCache(elems, el);
531        }
532    } while (el = el.parentElement);
533}
534
535function isContentOverflowing(el) {
536    return (el.clientHeight + 10 < el.scrollHeight);
537}
538
539// typically for <body> and <html>
540function overflowNotHidden(el) {
541    var overflow = getComputedStyle(el, '').getPropertyValue('overflow-y');
542    return (overflow !== 'hidden');
543}
544
545// for all other elements
546function overflowAutoOrScroll(el) {
547    var overflow = getComputedStyle(el, '').getPropertyValue('overflow-y');
548    return (overflow === 'scroll' || overflow === 'auto');
549}
550
551
552/***********************************************
553 * HELPERS
554 ***********************************************/
555
556function addEvent(type, fn) {
557    window.addEventListener(type, fn, false);
558}
559
560function removeEvent(type, fn) {
561    window.removeEventListener(type, fn, false);
562}
563
564function isNodeName(el, tag) {
565    return (el.nodeName||'').toLowerCase() === tag.toLowerCase();
566}
567
568function directionCheck(x, y) {
569    x = (x > 0) ? 1 : -1;
570    y = (y > 0) ? 1 : -1;
571    if (direction.x !== x || direction.y !== y) {
572        direction.x = x;
573        direction.y = y;
574        que = [];
575        lastScroll = 0;
576    }
577}
578
579var deltaBufferTimer;
580
581if (window.localStorage && localStorage.SS_deltaBuffer) {
582    try { // #46 Safari throws in private browsing for localStorage
583        deltaBuffer = localStorage.SS_deltaBuffer.split(',');
584    } catch (e) { }
585}
586
587function isTouchpad(deltaY) {
588    if (!deltaY) return;
589    if (!deltaBuffer.length) {
590        deltaBuffer = [deltaY, deltaY, deltaY];
591    }
592    deltaY = Math.abs(deltaY);
593    deltaBuffer.push(deltaY);
594    deltaBuffer.shift();
595    clearTimeout(deltaBufferTimer);
596    deltaBufferTimer = setTimeout(function () {
597        try { // #46 Safari throws in private browsing for localStorage
598            localStorage.SS_deltaBuffer = deltaBuffer.join(',');
599        } catch (e) { }
600    }, 1000);
601    return !allDeltasDivisableBy(120) && !allDeltasDivisableBy(100);
602}
603
604function isDivisible(n, divisor) {
605    return (Math.floor(n / divisor) == n / divisor);
606}
607
608function allDeltasDivisableBy(divisor) {
609    return (isDivisible(deltaBuffer[0], divisor) &&
610            isDivisible(deltaBuffer[1], divisor) &&
611            isDivisible(deltaBuffer[2], divisor));
612}
613
614function isInsideYoutubeVideo(event) {
615    var elem = event.target;
616    var isControl = false;
617    if (document.URL.indexOf ('www.youtube.com/watch') != -1) {
618        do {
619            isControl = (elem.classList &&
620                         elem.classList.contains('html5-video-controls'));
621            if (isControl) break;
622        } while (elem = elem.parentNode);
623    }
624    return isControl;
625}
626
627var requestFrame = (function () {
628      return (window.requestAnimationFrame       ||
629              window.webkitRequestAnimationFrame ||
630              window.mozRequestAnimationFrame    ||
631              function (callback, element, delay) {
632                 window.setTimeout(callback, delay || (1000/60));
633             });
634})();
635
636var MutationObserver = (window.MutationObserver ||
637                        window.WebKitMutationObserver ||
638                        window.MozMutationObserver);
639
640var getScrollRoot = (function() {
641  var SCROLL_ROOT;
642  return function() {
643    if (!SCROLL_ROOT) {
644      var dummy = document.createElement('div');
645      dummy.style.cssText = 'height:10000px;width:1px;';
646      document.body.appendChild(dummy);
647      var bodyScrollTop  = document.body.scrollTop;
648      var docElScrollTop = document.documentElement.scrollTop;
649      window.scrollBy(0, 3);
650      if (document.body.scrollTop != bodyScrollTop)
651        (SCROLL_ROOT = document.body);
652      else
653        (SCROLL_ROOT = document.documentElement);
654      window.scrollBy(0, -3);
655      document.body.removeChild(dummy);
656    }
657    return SCROLL_ROOT;
658  };
659})();
660
661
662/***********************************************
663 * PULSE (by Michael Herf)
664 ***********************************************/
665
666/**
667 * Viscous fluid with a pulse for part and decay for the rest.
668 * - Applies a fixed force over an interval (a damped acceleration), and
669 * - Lets the exponential bleed away the velocity over a longer interval
670 * - Michael Herf, http://stereopsis.com/stopping/
671 */
672function pulse_(x) {
673    var val, start, expx;
674    // test
675    x = x * options.pulseScale;
676    if (x < 1) { // acceleartion
677        val = x - (1 - Math.exp(-x));
678    } else {     // tail
679        // the previous animation ended here:
680        start = Math.exp(-1);
681        // simple viscous drag
682        x -= 1;
683        expx = 1 - Math.exp(-x);
684        val = start + (expx * (1 - start));
685    }
686    return val * options.pulseNormalize;
687}
688
689function pulse(x) {
690    if (x >= 1) return 1;
691    if (x <= 0) return 0;
692
693    if (options.pulseNormalize == 1) {
694        options.pulseNormalize /= pulse_(1);
695    }
696    return pulse_(x);
697}
698
699
700/***********************************************
701 * FIRST RUN
702 ***********************************************/
703
704var userAgent = window.navigator.userAgent;
705var isEdge    = /Edge/.test(userAgent); // thank you MS
706var isChrome  = /chrome/i.test(userAgent) && !isEdge;
707var isSafari  = /safari/i.test(userAgent) && !isEdge;
708var isMobile  = /mobile/i.test(userAgent);
709var isIEWin7  = /Windows NT 6.1/i.test(userAgent) && /rv:11/i.test(userAgent);
710var isOldSafari = isSafari && (/Version\/8/i.test(userAgent) || /Version\/9/i.test(userAgent));
711var isEnabledForBrowser = (isChrome || isSafari || isIEWin7) && !isMobile;
712
713var wheelEvent;
714if ('onwheel' in document.createElement('div'))
715    wheelEvent = 'wheel';
716else if ('onmousewheel' in document.createElement('div'))
717    wheelEvent = 'mousewheel';
718
719if (wheelEvent && isEnabledForBrowser) {
720    addEvent(wheelEvent, wheel);
721    addEvent('mousedown', mousedown);
722    addEvent('load', init);
723}
724
725
726/***********************************************
727 * PUBLIC INTERFACE
728 ***********************************************/
729
730function SmoothScroll(optionsToSet) {
731    for (var key in optionsToSet)
732        if (defaultOptions.hasOwnProperty(key))
733            options[key] = optionsToSet[key];
734}
735SmoothScroll.destroy = cleanup;
736
737if (window.SmoothScrollOptions) // async API
738    SmoothScroll(window.SmoothScrollOptions);
739
740if (typeof define === 'function' && define.amd)
741    define(function() {
742        return SmoothScroll;
743    });
744else if ('object' == typeof exports)
745    module.exports = SmoothScroll;
746else
747    window.SmoothScroll = SmoothScroll;
748
749})();

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.