css3 隐藏滚动条但是有滚动效果的方法

前沿

相信好多小伙伴都遇到过这个需求，那就来说一下。

---

原理：

就是在滚动区域的外部在套一个盒子，设置外部这个盒子宽比内部的少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>