vue div去除滚动条还有滚动效果

通过使用CSS属性`overflow:hidden`可以去除div的滚动条，不过也会同时禁用div的滚动效果。不过，我们可以通过添加一个容器div，将内容放在该容器内，并在该容器上使用`overflow:auto`属性，这样就可以实现div的滚动效果，同时去除滚动条的显示。下面是一个示例的代码：

<style>
    .scroll-container {
        width: 300px;
        height: 300px;
        overflow: auto;
    }
    .scroll-content {
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
</style>
<div class="scroll-container">
    <div class="scroll-content">
        <!-- 这里是需要滚动的内容 -->
    </div>
</div>

在上面的代码中，我们使用了两个div元素，一个是容器div，另一个是内容div。容器div通过设置`overflow:auto`属性实现了滚动效果，而内容div则设置了`overflow:hidden`属性，去除了滚动条的显示。这样就能同时实现滚动效果和去除滚动条了。当然，如果需要定制滚动条的样式，可以使用自定义滚动条插件来实现。

相关问题

vue上下滚动条翻页效果

在Vue中实现上下滚动条翻页效果的方法是通过设置一个固定高度的父容器，并在该容器内部使用`overflow-y: hidden`来隐藏超出容器高度的内容。然后，在父容器内部使用`ul`和`li`标签来展示需要滚动的内容。通过添加滚动按钮或其他交互方式，触发对应的滚动事件来实现翻页效果。

在提供的引用代码中，`.menu-div`类定义了包裹滚动内容的`div`的样式，其中`margin: 16px 0`设置了上下边距，`height: 200px`设置了容器的高度，`overflow-y: hidden`隐藏了超出容器高度的内容。在`ul li`选择器中，`list-style: none`用于去除列表项的默认样式。

在Vue组件中，可以使用`v-for`指令遍历数据列表，并使用`:key`来指定每个列表项的唯一标识。通过在`div`元素上添加`class="menu-div"`来应用之前定义的样式。在提供的代码中，还使用了两个`el-button`组件来模拟向上和向下滚动的功能。

总之，在Vue中实现上下滚动条翻页效果的关键是设置一个固定高度的父容器，并使用适当的样式和交互事件来实现滚动效果。