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"><divv-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>