Tips for automatically scrolling a table inside a div without affecting the overall page scroll on load

Question

Tips for automatically scrolling a table inside a div without affecting the overall page scroll on load

In one of my webpage sections, there are dropdowns and images at the top followed by a price grid below the fold. This price grid is contained within a scrollable div element. Initially, upon loading, a price in the grid is already selected but hidden, so the user must scroll down to view it.

My dilemma lies in wanting to automatically scroll the table inside the div to display the active selection without causing the entire page to scroll as well. The goal is for the user not to notice any movement upon page load; rather, they should only see the active choice once scrolling down naturally. Essentially, I aim to have the table scroll to reveal the active row discreetly (below the fold) first, then become visible to the user only when they manually navigate further down the page.

const activeRow = $('#prices_table').find('tr td.active');

activeRow[0].scrollIntoView({block: 'center', behavior: 'smooth' });

The issue with my current code is that it immediately scrolls both the page and the price grid when ideally, I want users to be able to scroll to the grid themselves without interference from automatic scrolling. Various solutions I've come across do involve scrolling the entire page prior to focusing on the div, which isn't suitable for my requirements.

javascript html css

Answer 1

Answer №1

I managed to devise a solution using JQuery.

var hasScrolled = false;

function isInViewport() {
    if (!hasScrolled) {
        var elem = $('#prices_table');
        if (elem !== undefined) {
            var elementTop = elem.offset().top;
            var elemBottom = elementTop + elem.outerHeight();
            var viewportTop = $(window).scrollTop();
            var viewportBottom = viewportTop + $(window).height();

            // return elemBottom > viewportTop && elemTop < viewportBottom;
            if (elemBottom > viewportTop && elementTop < viewportBottom) {
                var activeRow = $('#prices_table').find('tr td.active');
                var containerToScroll = $('#prices_table').find('tbody');
                var tdHeight = activeRow.outerHeight();
                if (activeRow) {
                    if (activeRow[0] !== undefined{
                 $(containerToScroll).scrollTop(($('#prices_table').find('tr td.active').offset().top - $('#prices_table').find('tbody').offset().top) - (tdHeight * 2));
                          hasScrolled = true;
                      }
                 }
            }
        }
    }
}


$(window).scroll(function() {
    isInViewport('#prices_table');
});

Prior to initiating the scroll action, I have implemented a series of checks to ensure its necessity. This prevents unnecessary scrolling and avoids repeated movements.

During scrolling, I verify if the element is within view.
I further confirm whether the scroll action has already been performed; if not, it proceeds.
If the desired element does not exist, the process is halted.
Calculations are conducted to determine the required scroll distance; without significant variance, the operation is canceled.
The necessary calculations are carried out, and the hasScrolled variable is updated to prevent future repetitions.

Although this method may be more elaborate than anticipated, it effectively achieves the intended outcome.

Answer 2

I managed to devise a solution using JQuery.

var hasScrolled = false;

function isInViewport() {
    if (!hasScrolled) {
        var elem = $('#prices_table');
        if (elem !== undefined) {
            var elementTop = elem.offset().top;
            var elemBottom = elementTop + elem.outerHeight();
            var viewportTop = $(window).scrollTop();
            var viewportBottom = viewportTop + $(window).height();

            // return elemBottom > viewportTop && elemTop < viewportBottom;
            if (elemBottom > viewportTop && elementTop < viewportBottom) {
                var activeRow = $('#prices_table').find('tr td.active');
                var containerToScroll = $('#prices_table').find('tbody');
                var tdHeight = activeRow.outerHeight();
                if (activeRow) {
                    if (activeRow[0] !== undefined{
                 $(containerToScroll).scrollTop(($('#prices_table').find('tr td.active').offset().top - $('#prices_table').find('tbody').offset().top) - (tdHeight * 2));
                          hasScrolled = true;
                      }
                 }
            }
        }
    }
}


$(window).scroll(function() {
    isInViewport('#prices_table');
});

Prior to initiating the scroll action, I have implemented a series of checks to ensure its necessity. This prevents unnecessary scrolling and avoids repeated movements.

During scrolling, I verify if the element is within view.
I further confirm whether the scroll action has already been performed; if not, it proceeds.
If the desired element does not exist, the process is halted.
Calculations are conducted to determine the required scroll distance; without significant variance, the operation is canceled.
The necessary calculations are carried out, and the hasScrolled variable is updated to prevent future repetitions.

Although this method may be more elaborate than anticipated, it effectively achieves the intended outcome.

Tips for automatically scrolling a table inside a div without affecting the overall page scroll on load

Answer №1

Similar questions

Unable to delete a dynamically inserted <select> element by using the removeChild method

Tips for updating the color of an active navbar:

Error in Typo3 Rendering FieldControl due to insufficient arguments

Is there a way I can implement lazy loading of results without having to overhaul my entire Laravel + jQuery application built in the Single Page Application style?

Exploring the latest updates in MUI modern version

How can JQuery's .load() method be best utilized when working with an image?

The error occurred in Commands.ts for Cypress, stating that the argument '"login"' cannot be assigned to the parameter of type 'keyof Chainable<any>))`

When attempting to upload a file from IOS10.3.1, the server received the correct file size but retrieved incorrect data, all of which appeared as

Javascript does not execute properly in Google Apps Script

How can I redirect a Spotify API request to save data directly to my local filesystem

Insert an array into a JavaScript code

The jQuery $() constructor and using strings with a forward slash at the beginning

Node.js for Instant Notifications

Sending Email Form in PHP using JQuery and Ajax for seamless user experience

Guide on creating a fluid line in Three.js by connecting two points while clicking the mouse, using buffer geometry

Upon a successful AJAX post request, the page fails to display

JavaScript Unit Testing seamlessly incorporated with CruiseControl.NET

Setting the value of a custom component property dynamically after the component has been rendered

Executing JavaScript Function on the Server Side

Tips for disregarding modified configuration files in Git