移动端列表超出横向滑动,并隐藏滚动条
vue框架写的一个移动端页面,想要做一个分类展示的页面
<template> <div> <ul> <li>图文分享标题1</li> <li>图文分享标题2</li> <li>图文分享标题3</li> <li>图文分享标题4</li> <li>图文分享标题5</li> <li>图文分享标题6</li> <li>图文分享标题7</li> <li>图文分享标题8</li> <li>图文分享标题9</li> <li>图文分享标题10</li> </ul> </div> </template> <script> export default { name: 'Share', } </script> <style lang="scss" scoped> ul { overflow-x: scroll; //块级元素在水平方向上发生溢出时,显示滚动条,内容会被截断 white-space: nowrap; //空白文本的处理:合并连续空白符,文本内换行无效 width: 100%; } /* // 谷歌浏览器 隐藏滚动条 */ ul::-webkit-scrollbar { display: none; } /* // 火狐浏览器 隐藏滚动条 IE浏览器 隐藏滚动条 */ ul { scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; } li { display: inline; margin: 2% 4%; } </style>
参考文章:https://blog.csdn.net/qq_37585017/article/details/106221941