短视频app制作，停止滑动时，自动隐藏滚动条

短视频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制作，停止滑动时，自动隐藏滚动条实现的相关代码， 更多内容欢迎关注之后的文章