隱藏 Scrollbar 容易出現的 BUG

隱藏Scrollbar是網頁製作中常見的一種常見設計，例如網站首頁常見的 Full Page Slider（本網首頁即是如此）。

隱藏Scrollbar 可以用 css實現，如下：

.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
  overflow: hidden;
}

但是如果只要特定頁面隱藏Scrollbar的話，就通常是用JavaScript把這些style加在body上（尤其單頁應用更是如此）

但是如果用JavaScript加上style的話，用家滑鼠的滾動行為是有機會比js隱藏Scrollbar更早發生的，這樣會造成卡住或頁面歪掉的情況，而用家在Scrollbar被隱藏後只能refresh頁面來使其回復正常。

典型例子如網易加速器官網，當一開始太快滾動的話有機會導致Full Page Slider整個歪掉。見圖：

它通過計算window高度來調整每張slide transform的距離，這是基於slide container的el.getBoundingClientRect().top為0。但是由於scrollbar被用家滑動過一小段距離，導致出來的效果整個歪掉。

因此筆者建議如果設計中包含Full Page Slider的話，儘量避免（在client side）用js隱藏Scrollbar，而是在初始html即加入隱藏Scrollbar的css。

本網站使用的框架是Next.js，pages/_app.tsx內的js是在server side運行的，所以可以加入這樣子的代碼來實現初始html隱藏Scrollbar：

  const isLargeScreen = useMediaQuery("(min-width: 1024px)");
  const isHomepage = router.pathname === "/";

  useEffect(() => {
    document.body.className =
      isHomepage && isLargeScreen ? "scrollbar-hide" : "";
  }, [isLargeScreen, isHomepage]);