相关疑难解决方法(0)

我试图使用按钮获得水平滚动.

我有一个容器,它有几个水平堆叠的div,我想用给定的按钮滚动它们.

请看看我的尝试并告诉我我做错了什么.

HTML:

   <div class="left">
      left div
      <button id="left-button">
        swipe left
      </button>
    </div>
     <div class="center" id="content">
      <div class=internal>
        div 1
      </div>
       <div class=internal>
        div 2
      </div>
       <div class=internal>
        div 3
      </div>
       <div class=internal>
        div 4
      </div>
       <div class=internal>
        div 5
      </div>
       <div class=internal>
        div 6
      </div>
       <div class=internal>
        div 7
      </div>
       <div class=internal>
        div 8
      </div>
     </div>
    <div class="right">
    <button id="right-button">
        swipe right
      </button>
      right div
    </div>

JQUERY:

  $('#right-button').click(function() {
      event.preventDefault();
      $('#content').animate({
        marginLeft: "+=200px"
      }, "slow");
   });

     $('#left-button').click(function() { …

我有一个带有 bootstrap-vue 项目的 VueJS。一个选项卡列表被渲染，但它大于父级的宽度。所以我想要一对按钮从左到右滚动列表。

我找到了这个例子，我在自己的项目中工作。 在 VueJS 中使用按钮进行水平滚动 但我无法让它与选项卡一起使用。

在我针对 .nav-tabs 的方法中，因为这是一个呈现给 DOM 的类。我试图用 .$refs 找出它，但无法到达实际元素，因为该元素仅在渲染后可见。

有人可以帮助让标签滚动。

https://jsfiddle.net/timmyl/xg8j7knb/19/

<div id="app">
  <div class="container">
    <b-row class="wrap" ref="wrap">
      <b-tabs content-class="mt-3">
        <b-tab v-for="category in categories" v-bind:title="category.name" :key="category.id">
        </b-tab>
        <b-tab>
          Content
        </b-tab>
      </b-tabs>
    </b-row>
    <b-row>
      <button @click="scroll_left">Scroll Left</button>
      <button @click="scroll_right">Scroll Right</button>
    </b-row>
  </div>
</div>

methods: {
     scroll_left() {
      let content = document.querySelector(".nav-tabs");
      content.scrollLeft -= 50;
    },
    scroll_right() {
      let content = document.querySelector(".nav-tabs");
      content.scrollLeft += 50;
    }

.tab-panel {
  flex-wrap: nowrap;
}

.wrap {
  overflow: hidden; …