javascript - How to scroll Tabs in VueJS with Bootstrap-vue - Stack Overflow

admin管理员组

文章数量:1352810

I have a VueJS with bootstrap-vue project. A list of tabs gets rendered but it is larger than the width of the parent. So I want to have a pair of buttons to scroll the list from left to right.

I found this example which I got working in my own project. Horizontal Scroll Using Buttons in VueJS But I can not get it to work with the tabs.

In the methods I target .nav-tabs because that is a class that gets rendered to the DOM. I tried to figure it out with .$refs but could not get to the actual element because that element is only visible once rendered.

Can someone please help to get the tabs scrolling.

/

<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;
  width: 100%;
  flex-direction: row;
}

.nav-tabs {
  flex-wrap: nowrap;
  white-space: nowrap;
}

I have a VueJS with bootstrap-vue project. A list of tabs gets rendered but it is larger than the width of the parent. So I want to have a pair of buttons to scroll the list from left to right.

I found this example which I got working in my own project. Horizontal Scroll Using Buttons in VueJS But I can not get it to work with the tabs.

In the methods I target .nav-tabs because that is a class that gets rendered to the DOM. I tried to figure it out with .$refs but could not get to the actual element because that element is only visible once rendered.

Can someone please help to get the tabs scrolling.

https://jsfiddle/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;
  width: 100%;
  flex-direction: row;
}

.nav-tabs {
  flex-wrap: nowrap;
  white-space: nowrap;
}

• javascript
• vuejs2
• bootstrap-4
• bootstrap-vue

Share Improve this question Follow edited Feb 28, 2019 at 17:29 timmy asked Feb 28, 2019 at 14:53 timmytimmy 48822 gold badges77 silver badges2323 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

you just need to tweak your css a bit as currently the content of the list is expanding to full screen and you need to add the overflow property in order the content to be scrollable,

so here what you are missing:

.nav-tabs {
flex-wrap: nowrap;
white-space: nowrap;
max-width: 500px;
overflow: auto;
}

I just modified your sandbox and add the the above property to .nav-tabs

https://jsfiddle/Ljk5a62v/

本文标签： javascriptHow to scroll Tabs in VueJS with BootstrapvueStack Overflow