在 VueJS 中使用按钮进行水平滚动

Question

我希望使用 VueJS 中的按钮实现水平滚动。我有一个容器，它有几个水平堆叠的 div，我想使用按钮滚动它们。

这是关于 JQuery 的 SO 上的相同线程。这个demo是JQuery中的解决方案。它应该说明我所追求的效果。

如何使用 VueJS 实现这种效果？

我已经看过的一些库包括vue-scroll-to和jump。

• Vue-scroll-to 要求用户指定要滚动到的元素，而我想在特定元素内水平滚动一定数量的像素。

• Jump 允许在定义数量的像素上滚动，但只能垂直工作并且只能在窗口上滚动。

编辑：我在 VanillaJS 中找到了一个小库：https : //github.com/tarun-dugar/easy-scroll

Answer 1

我为此制作了一个沙箱：在此处查看

逻辑是这样的：

scroll_left() {
  let content = document.querySelector(".wrapper-box");
  content.scrollLeft -= 50;
},
scroll_right() {
  let content = document.querySelector(".wrapper-box");
  content.scrollLeft += 40;
}

您有一个包装器并且您增加/减少了该scrollLeft属性

完整代码可以在这里找到

Answer 2

如果您正在寻找 javascript 本身的水平平滑滚动动画而不使用任何库。

scrollTo与使用behavior: 'smooth'

Vue.config.devtools = false;
Vue.config.productionTip = false;

new Vue({
el: '#app',

data: {
  scrollAmount: 0,
},

methods: {
scrollLeft: function () {
      const menu = this.$refs.menu
       menu.scrollTo({
      left: this.scrollAmount += 200,
      behavior: 'smooth',
    })
    },

scrollRight: function () {
      const menu = this.$refs.menu
       menu.scrollTo({
      left: this.scrollAmount -= 200,
      behavior: 'smooth',
    })
    }
},
mounted() {}
})

body {
    margin: 3em;
}

* {
    padding: 0;
    margin: 0;
} 

.menu-wrapper {
    position: relative;
    max-width: 310px;
    height: 100px;
    margin: 1em auto;
    border: 1px solid black;
    overflow-x: hidden;
    overflow-y: hidden;
}

.menu   {
  height: 120px;
  background: #f3f3f3;
  box-sizing: border-box;

  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
}
    
.item {
    display: inline-block;
    width: 100px;
    height: 100%;
    outline: 1px dotted gray;
    padding: 1em;
    box-sizing: border-box;
}

 
.paddle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 3em;
}
.left-paddle {
    left: 0;
}
.right-paddle {
    right: 0;
}
.hidden {
    display: none;
}

.print {
  margin: auto;
  max-width: 500px;
}
    
span {
    display: inline-block;
    width: 100px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app" class="menu-wrapper">
   <ul class="menu" ref="menu">
    <li class="item">1</li>
    <li class="item">2</li>
    <li class="item">3</li>
    <li class="item">4</li>
    <li class="item">5</li>
    <li class="item">6</li>
    <li class="item">7</li>
    <li class="item">8</li>
    <li class="item">9</li>
    <li class="item">10</li>
    <li class="item">11</li>
    <li class="item">12</li>
    <li class="item">13</li>
  </ul>
  
    <div class="paddles">
    <button class="left-paddle paddle" @click="scrollRight"> -
        </button>
      
        <button class="right-paddle paddle" @click="scrollLeft">
          >
        </button>
  </div>
  
</div>

Answer 3

您只能使用 JavaScript，使用您提供的示例，我将其转换为仅 JavaScript，这是它的 Codepen。

https://codepen.io/immad-hamid/pen/yEmayr

这是可以替换您发送的示例的 JavaScript。

const rightBtn = document.querySelector('#right-button');
const leftBtn = document.querySelector('#left-button');
const content = document.querySelector('#content');

rightBtn.addEventListener("click", function(event) {
  content.scrollLeft += 300;
  event.preventDefault();
});

leftBtn.addEventListener("click", function(event) {
  content.scrollLeft -= 300;
  event.preventDefault();
});

对于动画，你必须使用一些东西......你能做到吗？