css 元素横向滚动并隐藏滚动条

完整代码（谷歌浏览器）

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,user-scalable=no" />
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .title {
                display: flex;
                overflow: auto;
            }

            .titleItem {
                padding: 5px 10px;
                flex-shrink: 0;
            }
            
            /* 谷歌浏览器 */
            ::-webkit-scrollbar{
                overflow: hidden;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <div class="title">
                <div class="titleItem" v-for="item in topTitle">
                    {{item.text}}
                </div>
            </div>
        </div>

        <script src="./js/vue.js"></script>
        <script type="text/javascript">
            var app = new Vue({
                el: '#app',
                data() {
                    return {
                        topTitle: [{
                            text: '管理服务1001',
                        }, {
                            text: 'test服务1001',
                        }, {
                            text: '啊测试服务1001',
                        }, {
                            text: '测试啊服务1001',
                        }],
                    }
                }
            })
        </script>
    </body>
</html>
View Code

一、 元素横向滚动（元素长度大于父容器长度）：

html:

<div class="title">
    <div class="titleItem" v-for="item in topTitle">
        {{item.text}}
    </div>
</div>

  css:

.title {
　　/* flex-wrap默认 nowrap */
    display: flex;
    overflow: auto;
}
.titleItem {
    padding: 5px 10px;
    flex-shrink: 0;
}
        
/* 谷歌浏览器 */
::-webkit-scrollbar{
    overflow: hidden;
}

 

posted @ 2022-06-14 17:02  Name张三  阅读(844)  评论(0)    收藏  举报