smooth_scroll.cljs

;; smooth scroll

(def SCROLL_DURATION 550)
(def HEADER_HEIGHT 85)
(defn quad-out [p] (- (* p (- p 2))))
(defonce SMOOTH_SCROLL_ACTIVE (atom false))

(defn cancel-scroll-animation []
  (reset! SMOOTH_SCROLL_ACTIVE false)
  (goog.events/unlisten js/window event-type/WHEEL cancel-scroll-animation)
  (goog.events/unlisten js/window event-type/TOUCHMOVE cancel-scroll-animation)
  (goog.events/unlisten js/window event-type/MOUSEDOWN cancel-scroll-animation))

(defn add-scroll-cancel []
  (goog.events/listen js/window event-type/WHEEL cancel-scroll-animation)
  (goog.events/listen js/window event-type/TOUCHMOVE cancel-scroll-animation)
  (goog.events/listen js/window event-type/MOUSEDOWN cancel-scroll-animation))

(defn scroll-to [id]
  (when-let [element (and (not @SMOOTH_SCROLL_ACTIVE)
                          (gdom/getElement id))]
    (let [scroll-started  (js/Date.)
          original-scroll (.-y (gdom/getDocumentScroll))
          Δscroll (- (.-top (.getBoundingClientRect element)) HEADER_HEIGHT)]
      (when (< 0 Δscroll)
        (reset! SMOOTH_SCROLL_ACTIVE true)
        (letfn [(scroll-updater []
                  (when @SMOOTH_SCROLL_ACTIVE
                   (let [elapsed    (- (js/Date.) scroll-started)
                         p          (->> (/ elapsed SCROLL_DURATION)
                                         (min 1.0)
                                         (quad-out))
                         new-scroll (+ original-scroll (* p Δscroll))]
                     (.scrollTo js/window 0 new-scroll)
                     (if (<= 1.0 p)
                       (cancel-scroll-animation)
                       (js/requestAnimationFrame scroll-updater)))))]
          (add-scroll-cancel)
          (js/requestAnimationFrame scroll-updater))))))