BUG系列 - Animate On Scroll (AOS)

什麼是Animate On Scroll (AOS)？

連結：Animate on scroll
這是一個名叫Michał Sajnóg的波蘭工程師發表的js庫（Library），在他的Github也提供了CDN引入以及npm安裝（或yarn）兩種方式去使用AOS.js。該網站展示了利用aos滾動捲軸時，觸發div進場的效果。

加入自己網頁的方法很簡單，在<body>嵌入js

<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script>
  AOS.init();
</script>

並且在<head>裡嵌入CSS

1	<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">

再來就是照官網的範例把想要的特效加到<div>內即可，例如：

1	<div data-aos="fade-up"></div>

也可以加入其他不同的控制屬性，例如：
（留意每個數值有上限，超過就不會作用）

<div
  data-aos="fade-up"
  data-aos-offset="200"
  data-aos-delay="50"
  data-aos-duration="1000"
  data-aos-easing="ease-in-out"
  data-aos-mirror="true"
  data-aos-once="false"
  data-aos-anchor-placement="top-center"
>
</div>

另外，如果是用React.js、Vue.js等專案，可以使用npm安裝aospackage來管理，安裝方法如下：

yarn add aos@next
或 npm install --save aos@next

再來於Index.js內引入即可：

import AOS from 'aos';
import 'aos/dist/aos.css'; // You can also use <link> for styles
// ..
AOS.init();

進入正題，我遇到什麼問題？

教學完後，今天要進入我們的正題，我在使用aos.js的時候遇到的問題，那就是：會出現多餘的空白！
目前發現這個BUG的觸發條件是：

該頁面任一<div>使用了data-aos="fade-left"
使用Responsive裝置

馬上我就發現這個專案的Github Issues裡有人遇到跟我一樣的問題，就是這篇White Space on Mobile #626。這篇文章裡有人提供了幾個不錯的方法，不過我自己實測只有在CSS檔內加上以下程式碼有用：

1
2
3

html, body{
    overflow-x: hidden;
 }

另外我發現overflow-x設置成hidden會讓position: sticky失效，例如Navbar就常使用這個position配置。那這個失效基本上也有解法，就是在position處加上相容性程式碼：

.yourclass{
  position: -webkit-sticky;
  /*☝ 加上這個*/
  position: sticky;
}

不過如果是利用React styled-components去做css樣式的話，目前不支援-webkit-sticky的語法，所以styled-components目前還沒有解法，只能先放棄使用fade-left了，等之後有找到別的方法再來更新吧！