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

2024-07-12 03:42| 来源: 网络整理| 查看: 265

1、纵向

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

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

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

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

横向滚动 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; } } } .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); } }

【本文地址】

公司简介

联系我们

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

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