前沿
相信好多小伙伴都遇到过这个需求，那就来说一下。
原理：
就是在滚动区域的外部在套一个盒子，设置外部这个盒子宽比内部的少20px,(其实也就是滚动条的宽度)，然后在overflow:hidden就可以了
- 接下来看个小例子：
<template>
<div class="PrizeStatusShellOut">
<div class="PrizeStatusShell">
<div class="Width100 PrizeStatus" v-for="(item,index) in PrizeStatusText.content" :key="index">
<div class="StatusPhone Font15" v-html="item.Text"></div>
<div class="StatusPrice Font15" v-html="item.Price"></div>
</div>
</div>
</div>
</template>
<script>
export default {
props: ["PrizeStatusText"],
data() {
return {
}
},
mounted() {},
methods: {}
}
</script>
<style lang="less" scoped>
@import url('../tigerBaseCss/index');
.noRecord {
width: 5.26rem;
height: 3.88rem;
top: 1.75rem;
left: 0.55rem;
//这就是外部盒子，比内部盒子少20像素。
.PrizeStatusShellOut {
width: 5rem;
overflow: hidden;
}
.PrizeStatusShell {
width: 5.26rem;
height: 2.84rem;
overflow: auto;
}
.PrizeStatus {
height: 0.7rem;
display: flex;
flex-direction: row;
align-items: center;
.StatusPhone {
width: 60%;
}
.StatusPrice {
width: 40%;
}
}
}
</style>
