CODEWITHSUNDEEP
javascriptcssvue.js
Nine3KiD
Nine3KiD

Reputation: 713

How to set table to scroll to a default position

I have a table where 100 records. When I scroll down the table (let's say 50 records), let's say that I leave that page and come back. Then I have to scroll down again from the start. I want the start where I left off. I'm using VueJS. And right now I'm able to get the scroll location using the below code segment

This is my table,

<tbody v-scroll:#scroll-target="updateScrolledPoint">
  <tr>
    <td>{{book.keyword}}</td>
    <td>{{book.avgPages ? book.avgPages : '-'}}</td>
    <td>{{book.avgPages ? book.avgPages : '-'}}</td>
    <td>{{book.noCompetitors}}</td>
  </tr>
</tbody>

This is my function to get the scroll location and store it my custom cache,

updateScrolledPoint(e) {
   // Getting the scroll location
   const scrollPosition = e.target.scrollTop;

   // Setting the scrolled location to the cache
   const { activeTab } = this.$props.state.keywordSearch;
   cachedHelper.updateCacheScrollLocation(cachedHelper.SCREEN_TYPE.keywordSearch, activeTab, scrollPosition);
}

I want to set the already stored scroll position to scroll the page when I load it again. I believe it's a matter of setting the value in the table please help me.

Upvotes: 0

Views: 1918

Answers (2)

Nine3KiD
Nine3KiD

Reputation: 713

I want to thank Pawan Bishnoi for guiding me. I'm posting my code here,

    setPosition() {
      const { activeTab } = this.$props.state.keywordSearch;
      const tabScrollPoint = this.$props.state.keywordSearch.tabs[activeTab].scrollPosition === undefined ? 0
                : this.$props.state.keywordSearch.tabs[activeTab].scrollPosition;
      // getting table element from html dom by id.
      const table = document.getElementById('keyword-table-body');
    
      // setting top position of scrollbar
      return table.scrollTop = tabScrollPoint;
    },

I changed the Pawan Bishnoi code to make it work. Yes, you can return the saved value to the scroll by return table.scrollTop = tabScrollPoint;

I had to call this setPosition() function in mounted and updated hooks to run the function when the page is loading and updating.

Upvotes: 0

Pawan Bishnoi
Pawan Bishnoi

Reputation: 2127

On page load check if you have position in your cache, if position is available then you can set scroll bar like this:-

function setPosition(){
  // getting table element from html dom by id.
  let table = document.getElementById("table");

  // setting top position of scrollbar, scrollLeft is scrollbar of Y-Axis
  return table.scrollLeft = cachePosition;
}

Upvotes: 1

Related Questions