js 原生滚动的实现
<template> <div> <ul class="content"> <li>分类列表</li> <li>分类列表</li> <li>分类列表</li> <li>分类列表</li> <li>分类列表</li> <li>分类列表</li> <li>分类列表</li> <li>分类列表</li> <li>分类列表</li> <li>分类列表</li> <li>分类列表</li> <li>分类列表</li> <li>分类列表</li> <li>分类列表</li> <li>分类列表</li> <li>分类列表</li> <li>分类列表</li> <li>分类列表</li> <li>分类列表</li> <li>分类列表</li> <li>分类列表</li> <li>分类列表</li> <li>分类列表</li> <li>分类列表</li> <li>分类列表</li> <li>分类列表</li> <li>分类列表</li> <li>分类列表</li> <li>分类列表</li> <li>分类列表</li> <li>分类列表</li> <li>分类列表</li> <li>分类列表</li> <li>分类列表</li> <li>分类列表</li> <li>分类列表</li> <li>分类列表</li> <li>分类列表</li> <li>分类列表</li> <li>分类列表</li> <li>分类列表</li> <li>分类列表</li> <li>分类列表</li> <li>分类列表</li> <li>分类列表</li> <li>分类列表</li> <li>分类列表</li> <li>分类列表</li> <li>分类列表</li> <li>分类列表</li> <li>分类列表</li> <li>分类列表</li> <li>分类列表</li> <li>分类列表</li> <li>分类列表</li> <li>分类列表</li> <li>分类列表</li> <li>分类列表</li> <li>分类列表</li> <li>分类列表</li> <li>分类列表</li> <li>分类列表</li> <li>分类列表</li> <li>分类列表</li> <li>分类列表</li> <li>分类列表</li> <li>分类列表</li> <li>分类列表</li> <li>分类列表</li> <li>分类列表</li> <li>分类列表</li> <li>分类列表</li> <li>分类列表</li> <li>分类列表</li> <li>分类列表</li> </ul> </div> </template> <script> export default { name: 'Category' } </script> <style scoped> .content { /*原生滚动*/ height: 150px; background: red; overflow: hidden; overflow-y: scroll; } </style>
原生滚动的实现,需要给最外层的div一个固定的高度height: 150px;,然后设置超出部分隐藏,也就是overflow: hidden;然后设置y轴方向的滚动overflow-y: scroll,就这么简单
不积跬步无以至千里