纯CSS完成掩藏翻转条但仍具备翻转的实际效果(

日期:2020-09-18 类型:科技新闻 

关键词:如何制作微信小程序,微信小程序源码,小程序码生成,凡科网微信小程序,微信公众号小程序

挪动端

挪动端网页页面要是适配 Chrome 和 Safari 就够了,因此可使用自定翻转条的伪类挑选器 ::-webkit-scrollbar 来掩藏翻转条。

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

PC 端

PC 端对适配性的规定相对性来讲要高1点,全部能够换1种方式,大概思路便是在內容div外面包1个父器皿div,设定 overflow: hidden,內容div设定 display-x: hidden; display-y: auto; 最终设定父器皿div的宽度小于內容div的宽度或设定內容div的 margin-right 为负值便可以了。

<div class="outer">
    <div class="content">
      <p>1111</p>
      <p>222</p>
      <p>333</p>
      <p>444</p>
    </div>
</div>
 .outer {
   width: 300px;
   height: 300px;
   overflow: hidden;
 
   .content {
     width: 330px;
     /*margin-right: ⑴5px;*/
     height: 100%;
     overflow-x: hidden;
     overflow-y: auto;
     background: red;
     padding-top: 100px;
 
     p:not(:first-child) {
       margin-top: 100px;
     }
   }
 }

总结

以上所述是网编给大伙儿详细介绍的纯CSS完成掩藏翻转条但仍具备翻转的实际效果(挪动端和pc端),期待对大伙儿有一定的协助!