CSS完成掩藏翻转条并能够翻转內容实际效果(3种方

日期:2021-02-27 类型:科技新闻 

关键词:小程序制作流程,抽奖小程序,微信小程序怎么开店,小程序码生成,小程序模版

掩藏翻转条的另外还必须适用翻转,大家常常在前端开发开发设计中遇到这类状况,最非常容易想起的是加1个iscroll软件,但实际上如今CSS还可以完成这个作用,我早已在许多地区应用了,下面1起看看这3种方式。

方式1:测算翻转条宽度并掩藏起来

在本站的侧栏,你能够看到前端开发日报的那块內容并沒有翻转条,但电脑鼠标移上去却能够翻转內容。这是甚么技术性呢? 实际上我只是把翻转条根据精准定位把它掩藏了起来。

演试

下面给1个简化版的编码·

<div class="outer-container">
    <div class="inner-container">
     ......
    </div>
</div>
.outer-container{
 width: 360px;
 height: 200px;
 position: relative;
 overflow: hidden;
}
.inner-container{
 position: absolute;
 left: 0;
 top: 0;
 right: ⑴7px;
 bottom: 0;
 overflow-x: hidden;
 overflow-y: scroll;
}

这个编码恰当的向右挪动了17个像素,恰好等于翻转条的宽度。这个值是我手动式调节得来的。在chrome和IE没发现难题。

方式2:应用3个器皿包围着起来,不必须测算翻转条的宽度

该编码最开始是在Microsoftblog上看到的,跟我上面的思路类似,只但是人家里边又加多了1个盒子,将內容限定在盒子里边了。这模样就看不见翻转条另外还可以翻转。

编码以下:

<div class="outer-container">
     <div class="inner-container">
        <div class="content">
            ......
        </div>
     </div>
 </div>
//code from http://caibaojian.com/hide-scrollbar.html
.element, .outer-container {
  width: 200px;
  height: 200px;
}

.outer-container {
  border: 5px solid purple;
  position: relative;
  overflow: hidden;
}

.inner-container {
  position: absolute;
  left: 0;
  overflow-x: hidden;
  overflow-y: scroll;
}

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

方式3:css掩藏翻转条

另外该文章内容还共享了1种根据CSS掩藏翻转条的方式,但是这个方式兼容问题IE,做挪动端可使用。
那便是自定翻转条的伪目标挑选器::-webkit-scrollbar,详细信息请看以前的文章内容:CSS3自定webkit翻转条款式

chrome 和Safari

.element::-webkit-scrollbar { width: 0 !important }
IE 10+

.element { -ms-overflow-style: none; }
Firefox

.element { overflow: -moz-scrollbars-none; }

总结

到此这篇有关CSS完成掩藏翻转条并能够翻转內容实际效果(3种方法完成)的文章内容就详细介绍到这了,更多有关css 掩藏翻转条翻转內容內容请检索脚本制作之家之前的文章内容或再次访问下面的有关文章内容,期待大伙儿之后多多适用脚本制作之家!