Scroll bar settings of WeChat applet scroll-view

The scroll-view of the applet is used a lot, and the list page generally does not care about its scroll bar. Recently, I suddenly found that the performance of horizontal sliding in android and ios is different. Where is the difference? It is not displayed directly on ios, and there is no one. After thinking about it deeply, can this scroll bar be changed in color or style. If you have the urge to change it immediately.

1. Open the official demo directly, read the official document carefully, there is no explanation, this is the consistent style of the official document. There isn't a single property that controls showing/hiding the scrollbar, let alone this style. So documentation is hopeless.

2. Since it is a component, it is controlled by css. Let's take a look at the introduction of scroll in css, there are roughly the following attributes: reference link .


Position <1>:-webkit-scrollbar The overall part of the scroll bar .

Position <2> in the picture above: -webkit-scrollbar-button Buttons at both ends of the track of the scroll bar, allowing to fine-tune the position of the small square by clicking.

Position <3> in the above image: -webkit-scrollbar-corner corner, that is, the intersection of two scroll bars.

Position <4> in the picture above: -webkit-scrollbar-thumb The small square inside the scroll bar can move up and down (or left and right, depending on whether it is a vertical scroll bar or a horizontal scroll bar).

Position <5> in the picture above: -webkit-scrollbar-track The track of the scroll bar (with thumb inside).

Position <6> in the picture above: -webkit-scrollbar-track-piece inner track, the middle part of the scroll bar (removed).

But you can also watch it directly in the applet:


3. The above is the usage in normal css, how to use it in applet? Same, write in wxss.

For example: hide the slider:

 
 
::-webkit-scrollbar
{
width: 0 ;
height: 0 ;
color: transparent ;
}

or DIY:

 
 
/*Define the height and width of the scroll bar and the height and width of the background corresponding to the size of the horizontal and vertical scroll bars*/
::-webkit-scrollbar
{
width: 6px ;
height: 6px ;
background-color: #ffffff ;
}
/*Define the shadow + rounded corners in the scrollbar track*/
::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 10px rgba( 0 , 0 , 0 , 0.3 ) ;
border-radius: 10px ;
background-color: yellow ;
}
/*Define slider inner shadow + rounded corners*/
::-webkit-scrollbar-thumb
{
border-radius: 10px ;
-webkit-box-shadow: inset 0 0 10px rgba( 0, 0, 0, .3 );
background-color: #ff5500;
}

以上写法在android及开发工具上效果是一致的,如下图:


4.本以为已经大功告成,拿出我的小6扫一下预览,嘴上笑嘻嘻,心里MMP。呵呵!继续想办法!

找了半天,终于知道为什么横向的滚动条隐藏了,而没有办法弄出来!看这里

原内容是:


算了算了 ,ios就别瞎折腾了,想要效果,那就自定义了!





Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=324497926&siteId=291194637