How to hide the right scroll bar in uniapp

Uniapp method to hide the right scroll bar: 1. Externally link [base.css] in the style of [app.vue]; 2. Use conditional compilation directly in [app.vue], which can be based on Different platforms control the properties of different tags.

The operating environment of this tutorial: windows7 system, uni-app2.5.1 version, Dell G3 computer.

Recommended (free): uni-app development tutorial

How to hide the scroll bar on the right side of uniapp:

1 . Externally link base.css in the style of app.vue. This method is more suitable to control all scroll bars.

<style>
    @import url("./base.css");
</style>

In base.css

::-webkit-scrollbar{
  display: none;
}

2. Directly in app.vue Conditional compilation is used inside, and the attributes of different tags can be controlled according to different platforms

<style>
@import url("./base.css");
/* 解决小程序和app滚动条的问题 */
/* #ifdef MP-WEIXIN || APP-PLUS */
::-webkit-scrollbar{
    display: none;
}
/* #endif */
/* 解决H5 的问题 */
/* #ifdef H5 */
    uni-scroll-view .uni-scroll-view::-webkit-scrollbar {
    /* 隐藏滚动条，但依旧具备可以滚动的功能 */
display: none
    }
/* #endif */
</style>

Related free learning recommendations: Programming Video

The above is the detailed content of How to hide the right scroll bar in uniapp. For more information, please follow other related articles on the PHP Chinese website!