為什麼 scrollbar 在 mac os 的 browser 無法顯示出來呢?

最近在 div 上加入 overflow-y: scroll; height:250px; 讓 div 高度超過 250px 時就呈現 scrollbar 。 在 Windows 的機器上測試顯示都正常。

但是在 mac 上測試， scrollbar 卻沒有呈現出來。

後來有查到 Force the scrollbar back 這些的說明，我們需要針對 -webkit-scrollbar 來設定它，所以在 css 中需要再加入以下的設定，來讓 scrollbar 在 mac 的瀏覽器可以正常呈現 scrollbar 哦!

1
2
3
4
5
6
7
8
9
::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px;
}
::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0,0,0,.5);
    box-shadow: 0 0 1px rgba(255,255,255,.5);
}

測試網頁

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

大家好，我是亂馬客 Rainmaker，目前任職於叡揚資訊，大家也都叫我 RM 。 平常負責開發公司各產品線的加值、共用的軟體，例如 Azure, OpenAI, Chatbot, Database ... 同時 Support 公司各種技術及資安修改問題。 Blog中的內容也是個人的看法， 如果有需要討論的地方， 可以留言，或是 mail 給我 :) rainmaker_ho@gss.com.tw