H5 CSS 滚动条隐藏（横向/纵向）

最新推荐文章于 2024-05-27 16:21:48 发布

虹辰

最新推荐文章于 2024-05-27 16:21:48 发布

阅读量8.9k

点赞数 2

文章标签： css

本文链接：https://blog.csdn.net/weixin_41900917/article/details/123852147

版权

1、纵向

全局隐藏- 最外层css样式上增加 -webkit-scrollbar

.time_plan_detail_warp {
  height: 100vh;
  overflow-y: scroll;
  &::-webkit-scrollbar {
    display: none;
  }
}

2、横向

思路：代码取巧，两层div，固定高度，内高度比外高度多20px，然后padding-bottom: 20px

vue，开箱即用的代码（代码有自身的逻辑部分，可忽略）

<template>
  <div class="time_profit_warp">
    <div class="time_profit_center">
      <div
        v-for="(item, index) in iconArray"
        :key="index"
        :class="['profit_item', iconArray.length > 4 ? 'item_more_four' : '']"
      >
        <div class="profit_img" @click="toPrpofit(item.target)">
          <!-- <img :src="item.img" alt="" /> -->
        </div>
        <div class="profit_word">横向滚动</div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator';

@Component({ name: 'ProfitIcon' })
export default class ProfitIcon extends Vue {
  private iconArray: any = ['0', '1', '2', '3', '4', '5'];

  toPrpofit(target: any) {
    if (target) {
      window.location.href = target;
    }
  }
}
</script>
<style lang="scss">
.time_profit_warp {
  padding-bottom: r(24);
  height: r(220);
  overflow: hidden;
  border: 1px solid white;
  .time_profit_center {
    height: r(240);
    display: flex;
    justify-content: flex-start;
    overflow: auto;
  }
  .profit_item {
    display: flex;
    padding-bottom: r(40);
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    min-width: r(168);
    border: 1px solid green;
    .profit_img {
      width: r(96);
      height: r(96);
      border: 1px solid red;
      border-radius: 50%;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .profit_word {
      margin-top: r(16);
      font-size: r(26);
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(255, 255, 255, 0.6);
      line-height: r(32);
      white-space: nowrap;
      text-align: center;
    }
  }
  .profit_item:last-child {
    margin-right: 0;
  }
  .item_more_four {
    min-width: r(150);
  }
}
</style>