Changing the active Vuetify Tabs as you scroll

Question

Changing the active Vuetify Tabs as you scroll

I have a Vuetify tabs setup that utilizes vue-scrollto to scroll to a specific position when a tab is clicked.

       <v-tabs
          centered
          grow
          color="#009EE2"
        >
          <div class="slider-background" />
          <v-tabs-slider />

          <v-tooltip
            bottom
            v-for="(tab, key) in tabs"
            :key="key"
            color="#009EE2"
          >
            <template v-slot:activator="{on}">
              <v-tab
                v-on="on"
                v-scroll-to="{
                  el: tab.scrollTo,
                  container: scrollContainer,
                  duration: 300,
                  easing: 'linear',
                  offset: -120,
                  force: true,
                  cancelable:true
                }"
              >
                <v-icon v-text="tab.icon" />
              </v-tab>
            </template>
            <div class="v-tooltip-arrow" />
            <span>
              {{ $t(tab.tooltipText) }}
            </span>
          </v-tooltip>
        </v-tabs>

Now, I am aiming to change the active tab based on the scrolling position.

Despite my efforts searching for a solution, I haven't come across any helpful resources. Here is the documentation I've consulted so far.

Is there a way to achieve this without resorting to JQuery?

For reference, here is an example showcasing the desired result using JQuery: http://jsfiddle.net/cse_tushar/Dxtyu/141/

javascript vue.js vuetify.js vuetify-tabs

Answer 1

Answer №1

By utilizing the href attribute for tabs along with an intersection observer, you can achieve this functionality.

Check out this basic, yet functional, example here: https://codepen.io/Qumez/pen/VwYEapg

The approach involves linking each tag with an anchor and connecting it to a data property. At the bottom of the page, there is a span with an intersection observer using Vuetify's v-intersect wrapper:

<span v-intersect ="handleIntersect">Page will automatically scroll to tab-3 when this span is in view</span>

This intersect wrapper triggers a user-defined method (in this instance, handleIntersect) to update the tab accordingly:

        handleIntersect(entries, observer) {
            if(entries[0].isIntersecting) {
                this.tab = "tab-3"
            }
            else {
                this.tab = "tab-1"
            }
        }

In your scenario, any item that could potentially change a tab based on its position in the viewport might require invoking a specific function with an argument specifying which tab to select. This concept aligns closely with what is demonstrated in the provided Pen.

Please Note: Although I haven't personally worked with IntersectionObserver before and I'm unsure if isIntersecting is the most effective way to determine an element's visibility in the viewport, it is advisable to conduct your own research and testing prior to incorporating this into production code :)

Answer 2

By utilizing the href attribute for tabs along with an intersection observer, you can achieve this functionality.

Check out this basic, yet functional, example here: https://codepen.io/Qumez/pen/VwYEapg

The approach involves linking each tag with an anchor and connecting it to a data property. At the bottom of the page, there is a span with an intersection observer using Vuetify's v-intersect wrapper:

<span v-intersect ="handleIntersect">Page will automatically scroll to tab-3 when this span is in view</span>

This intersect wrapper triggers a user-defined method (in this instance, handleIntersect) to update the tab accordingly:

        handleIntersect(entries, observer) {
            if(entries[0].isIntersecting) {
                this.tab = "tab-3"
            }
            else {
                this.tab = "tab-1"
            }
        }

In your scenario, any item that could potentially change a tab based on its position in the viewport might require invoking a specific function with an argument specifying which tab to select. This concept aligns closely with what is demonstrated in the provided Pen.

Please Note: Although I haven't personally worked with IntersectionObserver before and I'm unsure if isIntersecting is the most effective way to determine an element's visibility in the viewport, it is advisable to conduct your own research and testing prior to incorporating this into production code :)

Answer 3

Answer №2

I successfully achieved this without relying on external libraries like vue-scrollto.

Below is the code for implementing tabs:

<v-tabs vertical v-model="tab_selected" >
      <span v-for="(category, index) in categories" :key="index">
        <v-tab @click="$vuetify.goTo('#sec_'+index)" class="nav_tab">
          {{category.name}}
        </v-tab>
      </span>

    </v-tabs>

In this setup, tab selection is bound to a v-model and scrolling to the desired div is achieved using $vuetify.goTo(). More information can be found here.

The scrollable content is contained within a free-flowing div:

<div v-for="(category, index) in categories" :key="index">
        <v-card :id="'sec_'+index" class="card-shadow mb-10">
          <span :id="'span_'+index" v-intersect="handleIntersect"></span>
          ...
        </v-card>
      </div>

In this scenario, tabs and scrollable content are placed in a column layout of 4:8 respectively.

This functionality consists of two parts. Firstly, clicking on a tab should scroll to the corresponding content. This is managed through $vuetify.goTo(). Secondly, while scrolling the content div, the relevant tab should be selected based on visibility. This is handled by the v-intersect directive. More details can be found here.

<span :id="'span_'+index" v-intersect="handleIntersect"></span>

The handleIntersect function triggers when the specified span is within view. It detects the index of the visible span and activates the corresponding tab via v-model.

handleIntersect(entries, observer){
  let intersecting_element = entries[0]
  if(intersecting_element.isIntersecting){
    let id = intersecting_element.target.id
    let index = Number(id.split("_")[1])
    this.tab_selected = index
  }
}

See how it appears in action here: https://gyazo.com/388550a03d66e086d7dc00b646264806

Cheers!

Answer 4

I successfully achieved this without relying on external libraries like vue-scrollto.

Below is the code for implementing tabs:

<v-tabs vertical v-model="tab_selected" >
      <span v-for="(category, index) in categories" :key="index">
        <v-tab @click="$vuetify.goTo('#sec_'+index)" class="nav_tab">
          {{category.name}}
        </v-tab>
      </span>

    </v-tabs>

In this setup, tab selection is bound to a v-model and scrolling to the desired div is achieved using $vuetify.goTo(). More information can be found here.

The scrollable content is contained within a free-flowing div:

<div v-for="(category, index) in categories" :key="index">
        <v-card :id="'sec_'+index" class="card-shadow mb-10">
          <span :id="'span_'+index" v-intersect="handleIntersect"></span>
          ...
        </v-card>
      </div>

In this scenario, tabs and scrollable content are placed in a column layout of 4:8 respectively.

This functionality consists of two parts. Firstly, clicking on a tab should scroll to the corresponding content. This is managed through $vuetify.goTo(). Secondly, while scrolling the content div, the relevant tab should be selected based on visibility. This is handled by the v-intersect directive. More details can be found here.

<span :id="'span_'+index" v-intersect="handleIntersect"></span>

The handleIntersect function triggers when the specified span is within view. It detects the index of the visible span and activates the corresponding tab via v-model.

handleIntersect(entries, observer){
  let intersecting_element = entries[0]
  if(intersecting_element.isIntersecting){
    let id = intersecting_element.target.id
    let index = Number(id.split("_")[1])
    this.tab_selected = index
  }
}

See how it appears in action here: https://gyazo.com/388550a03d66e086d7dc00b646264806

Cheers!

Changing the active Vuetify Tabs as you scroll

Answer №1

Answer №2

Similar questions

Unexpected behavior is being encountered with the else statement, and there are compatibility issues with IE and Mozilla Browser in the overall script

AngularJS seems to be failing to display the initial option in the input select field

JavaScript 'this' pointing to incorrect object

CSS animation stalling

I'm noticing multiple repeated entries appearing when I try to set the cookie - what could be causing

Troubleshooting Vue 3: Dealing with Synchronization Issues Between Keyboard Input and

What is the best way to check the difference between the current date and time with another date and

AngularJS's ng-click function seems to be malfunctioning

Is it possible that when a user is redirected to a different URL, Chrome terminates any pending Ajax requests?

What is the process for incorporating an external script into my Vue methods?

fileuploader with clipboard functionality and easy drag-and-drop feature using HTML and JavaScript

Discover the specific item within an array of objects

Bigcommerce encounters a 401 error during the payment processing, triggered by API with error code 10001

Issue with Bootstrap 4.x tooltip positioning within an overflowing container

Creating a custom video to use as the favicon for my website

The front end button stubbornly refuses to comply and redirect to another page

Utilize getJSON to refresh the JavaScript datetimepicker

Storing information in local storage as JSON using AngularJS

Nuxt's production mode delays resource loading

What is the best way to adjust a CSS width using the output from a JavaScript function?