vue实现点击按钮控制可滑动的导航栏

最新推荐文章于 2025-02-19 16:41:36 发布

原创

最新推荐文章于 2025-02-19 16:41:36 发布 · 1.7k 阅读

标签

#vue.js #javascript #前端

收录于

文章介绍了如何使用JavaScript的scrollLeft属性和scrollTo方法来实现导航栏的平滑左右移动。通过绑定scrollLeft和scrollRight函数到按钮上，调整.data_bar元素的滚动位置，实现向左或向右滚动一个可视宽度的效果。平滑滚动行为通过设置behavior参数为smooth来实现。

实现效果：点击左箭头导航栏向左移动，点击右按钮导航栏向右移动

实现方式：在写好的导航中为左按钮和右按钮绑定两个函数`scrollLeft()`和` scrollLeft()`,接着实现逻辑，代码如下：

 // 按钮左右滑动

        scrollLeft() {
            const dataBar = document.querySelector('.data_bar');
            dataBar.scrollTo({
                left: dataBar.scrollLeft - dataBar.clientWidth,
                behavior: 'smooth'
            });
        },

        scrollRight() {
            const dataBar = document.querySelector('.data_bar');
            dataBar.scrollTo({
          &nbs