移动端H5 css3自定义滚动条样式

• <!-- 活动规则 -->
                  <div class="sgMaskMain">
                      <div class="closeBtn" @click="strategyShow = false"></div>
                      <div class="strategyWrapper" @click.stop>
                          <div class="stgContent auto-scroll">
                              <div class="sc_msg">
                                  <h2>活动</h2>
                                  <p style="text-align:center">123456</p>
                                  <p style="text-align:center">121212121212</p>
                              </div>
                              <div class="sc_msg">
                                  <h2>活动规则</h2>
                                  <ul>
                                      <li>
                                          <h3>1. 名词解释</h3>
                                          <p>①哈哈哈哈哈哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
                                          <p>②哈哈哈哈哈哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈。</p>
                                      </li>
                                      <li>
                                          <h3>2. 任务类型和奖励</h3>
                                          <p>①哈哈哈哈哈哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
                                          <p>②哈哈哈哈哈哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
                                      </li>

                                       <li>
                                          <h3>2. 任务类型和奖励</h3>
                                          <p>①哈哈哈哈哈哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
                                          <p>②哈哈哈哈哈哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
                                      </li>

                                </ul> 
  
                          </div> 
  
                   <div class="footerMsg">该活动最终解释我所有</div> </div> </div> </div> </van-overlay>

  上面是主要布局代码。

• 布局样式代码如下：

• .strategyWrapper{
                      width: 305px;
                      height: 490px;
                      padding: 120px 10px 50px 20px;
                      background: url('../assets/images/taskList/maskBg.png') no-repeat center top;
                      background-size: 100% 100%;
                      .stgContent{
                          height: 340px;
                          margin: 0 auto;
                          overflow-y: scroll;
                          .sc_msg{
                              margin:10px auto;
                              h2{
                                  font-size: 16px;
                                  font-family: PingFang SC;
                                  font-weight: 600;
                                  color: #FF5C00;
                                  line-height: 16px;
                                  text-align: center;
                                  margin: 14px 0;
                                  &::after,&::before{
                                      display: inline-block;
                                      width: 8px;
                                      height: 8px;
                                      content: '';
                                      margin: 0 10px;
                                      background: linear-gradient(97deg, #FF5B00, #FFAE00);
                                      border-radius: 50%;
                                  }
                              }
                              p{
                                  font-size: 12px;
                                  font-family: PingFang SC;
                                  font-weight: 400;
                                  color: #5E2300;
                                  line-height: 20px;
                                  // text-indent: 2em;
                                  padding: 0 15px;
                              }
                              ul>li>h3{
                                  font-size: 12px;
                                  font-family: PingFang SC;
                                  font-weight: 500;
                                  color: #FF7632;
                                  line-height: 20px;
                                  margin: 10px 0;
                              }
                          }
                          .footerMsg{
                              margin:20px auto;
                              text-align: center;
                              font-size: 9px;
                              font-family: PingFang SC;
                              font-weight: 300;
                              color: #C79F82;
                              line-height: 15px;
                          }
                      }
                  }

   

•  

  主要是样式代码如下：

 ::-webkit-scrollbar { /* 滚动条整体样式 */
                    width: 5px;     /*高宽分别对应横竖滚动条的尺寸*/
                    height: 5px;
                }
                ::-webkit-scrollbar-thumb { /* 滚动条里面小方块 */
                    border-radius: 5px;
                    // -webkit-box-shadow: inset 0 0 5px #FF5E00;
                    background: #FF5E00;
                }
                ::-webkit-scrollbar-track { /* 滚动条里面轨道 */
                    // -webkit-box-shadow: inset 0 0 5px #FFD6B1;
                    border-radius: 5px;
                    background: #FFD6B1;
                }
                .auto-scroll { overflow: overlay  } /* 需要滚动的地方加上这个class */
                .auto-scroll ::-webkit-scrollbar { /* 组件内滚动条不显示 */
                    display: none;
                }
                .auto-scroll:hover ::-webkit-scrollbar { /* 悬停时滚动条才显示 */ 
                    display: block; 
                }

在需要滚动的元素上加入 auto-scroll 类名即可。（由于太多人说没效果，我重新编辑把我这边布局代码贴上来了 大家可以对比下有什么不一样）