移動端列表超出橫向滑動，並隱藏滾動條

vue框架寫的一個移動端頁面，想要做一個分類展示的頁面

<template>
  <div>
    <ul>
      <li>圖文分享標題1</li>
      <li>圖文分享標題2</li>
      <li>圖文分享標題3</li>
      <li>圖文分享標題4</li>
      <li>圖文分享標題5</li>
      <li>圖文分享標題6</li>
      <li>圖文分享標題7</li>
      <li>圖文分享標題8</li>
      <li>圖文分享標題9</li>
      <li>圖文分享標題10</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'Share',
}
</script>

<style lang="scss" scoped>
ul {
  overflow-x: scroll; //塊級元素在水平方向上發生溢出時，顯示滾動條，內容會被截斷
  white-space: nowrap; //空白文本的處理：合並連續空白符，文本內換行無效
  width: 100%;
}
/* // 谷歌瀏覽器 隱藏滾動條 */
ul::-webkit-scrollbar {
  display: none;
}
/* // 火狐瀏覽器 隱藏滾動條 IE瀏覽器 隱藏滾動條 */
ul {
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
}
li {
  display: inline;
  margin: 2% 4%;
}
</style>

　　參考文章：https://blog.csdn.net/qq_37585017/article/details/106221941