How to scroll a table inside a div on load without scrolling the page

60
April 13, 2018, at 7:24 PM

I have a page that had dropdown and images at the top, then a price grid at the bottom (bellow the fold). The price grid is scroll-able inside a div element. On load there is a price on the grid selected, but it is hidden, so you have to scroll the table down to see it.

My problem is, I want to scroll the table within the div element to show the active - but I do not want to scroll the page as well. On load the user should not see anything moving, the table should scroll to show the without them aware (below the fold). When they scroll down the page they should then see the table is displaying the active (selected price) and the table will be scrolled.

const activeRow = $('#prices_table').find('tr td.active');
activeRow[0].scrollIntoView({block: 'center', behavior: 'smooth' });

The problem with my code is it scrolls the user down to the price grid and then scrolls the price grid. I want the user to be left to scroll down to the price grid themselves.

I have found many similar questions, all of these result in the whole page scrolling to the div, and then the div scrolling to show the active class. I need a solution where the page does not scroll.

Answer 1

I have no come up with a solution in 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');
});

I have a few variables to check before actually scrolling, as sometimes the element is in the correct place on load, and once it has scrolled once I don't want it to move.

  • On Scroll I now check if element is in view.
  • I then check if element has previously scrolled, if it hasn't then I will continue.
  • I set element, if it doesn't exist then I don't continue.
  • I do some calculations to check the difference the scroll needs to move, if there is no difference I don't continue.
  • I then do my calculation and update variable hasScrolled to true so this never fires again.

Bit of a longer approach than I was looking for but it works a treat.

READ ALSO
Difficulties while trying to style individual list-view cells, like a chat app

Difficulties while trying to style individual list-view cells, like a chat app

For my Chat GUI, I'm trying to 'show' the messages styled as Facebook's Messenger does, or at least, in that mannerIf I'm the one sending them, they should be aligned to the right, if I'm getting a message from anyone else, they should be aligned to the left, and their background-color...

34
MouseOver event handler by SimpleMaps

MouseOver event handler by SimpleMaps

I am creating an interactive SVG map by Simplemaps plugin

120
CSS Animation bugs in firefox

CSS Animation bugs in firefox

I am trying to spin 2 cards, one an icon and other a value My haml snippet for it is

115