css 实现移动端横滑

最新推荐文章于 2022-08-24 23:22:08 发布

userkang

最新推荐文章于 2022-08-24 23:22:08 发布

阅读量728

点赞数 1

分类专栏： css 文章标签：横滑移动端 css

本文链接：https://blog.csdn.net/userkang/article/details/85052463

版权

css 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

效果

在这里插入图片描述

实现

<div class="tab-part-wrapper">
  <div class="tab-part">
    <ul class="scroll-hidden">
      <li class="tab-item active">小说·文学</li>
      <li class="tab-item">历史·传记</li>
      <li class="tab-item">社科·心理</li>
      <li class="tab-item">经管·科普</li>
      <li class="tab-item">艺术·文化</li>
    </ul>
  </div>
</div>

.tab-part-wrapper {
  height: 40px;
  max-width: 360px;
}
.tab-part {
  height: 40px;
  background: #c9d0ec;
  overflow: hidden;
  font-size: 0;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}
.tab-item {
  display: inline-block;
  height: 40px;
  width: 94px;
  font-size: 14px;
  line-height: 40px;
  text-align: center;
  color: #021f88;
}
.active {
  color: #fff;
  font-weight: 800;
  background: #021f88;
}
.scroll-hidden {
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 10px;
  margin-bottom: -10px;
}

问题

1、ios滑动不流畅

设置滚动回弹效果：

  -webkit-overflow-scrolling: touch;

2、隐藏滚动条

一般使用这个属性就能隐藏滚动条：

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

但是在微信 webview 内核升级后，添加了 -webkit-overflow-scrolling: touch; 这个属性后，就不起作用了。

所以就需要自己写个 dom 手动来隐藏滚动条，比如 scroll-hidden 样式中：

padding-bottom: 10px;
margin-bottom: -10px;