美文网首页
css3 隐藏滚动条但是有滚动效果的方法

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

作者: 郝艳峰Vip | 来源:发表于2019-12-10 11:01 被阅读0次

    前沿

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


    原理:

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

    相关文章

      网友评论

          本文标题:css3 隐藏滚动条但是有滚动效果的方法

          本文链接:https://www.haomeiwen.com/subject/zfgwgctx.html