短視訊app製作，停止滑動時，自動隱藏滾動條實現的相關程式碼

1.首先我們找到專案的App.vue檔案然後在style標籤裡面新增如下程式碼，這樣一來，可以根據不同平臺控制不同標籤的屬性。

<style>
/*每個頁面公共css */
/* 解決小程式和app滾動條的問題 */
/* #ifdef MP-WEIXIN || APP-PLUS */
::-webkit-scrollbar {
    display: none;
    width: 0 !important;
    height: 0 !important;
    -webkit-appearance: none;
    background: transparent;
    color: transparent;
  }
/* #endif */
/* 解決H5 的問題 */
/* #ifdef H5 */
    uni-scroll-view .uni-scroll-view::-webkit-scrollbar {
    /* 隱藏滾動條，但依舊具備可以滾動的功能 */
display: none;
    width: 0 !important;
    height: 0 !important;
    -webkit-appearance: none;
    background: transparent;
    color: transparent;
    }
/* #endif */
</style>

​

2.我們還可以在App.vue的style裡面外部連結base.css 這種辦法可以控制所有的滾動條。

<style>
/*每個頁面公共css */
@import url("./src/assets/css/base.css");
</style>

3.base.css程式碼如下

::-webkit-scrollbar {
    display: none;
    width: 0 !important;
    height: 0 !important;
    -webkit-appearance: none;
    background: transparent;
    color: transparent;
  }

以上就是短視訊app製作，停止滑動時，自動隱藏滾動條實現的相關程式碼， 更多內容歡迎關注之後的文章