`Monitoring and adjusting page view during window resizing in a dynamic website`

Question

`Monitoring and adjusting page view during window resizing in a dynamic website`

Situation:
Imagine we are reading content on a responsive page and decide to resize the browser window. As the window narrows, the content above extends down, making the entire page longer. This results in whatever content we were previously viewing being pushed further down the page as we continue to adjust the window size.

Example:
For example, let's say we were exploring the Helper classes section on this webpage. When we shrink or expand the window significantly, the section we were focused on moves up or down within our current view.

Prompt:
Is there a solution to this issue? Can we maintain our current view of the page regardless of changes to the content above when resizing the window?

Thoughts:
One suggestion is to use JavaScript to detect window resize events and automatically scroll the page to the topmost element that was visible before the resize. However, concerns arise about potential performance impacts, especially on larger pages. Additionally, determining the exact "top-most element" may be challenging, as overlapping elements can complicate this definition.

This seems more like a flaw in default browser scrolling behavior rather than an inherent problem with responsive design. It raises questions about whether the current behavior aligns with user expectations or if improvements are needed for a smoother browsing experience.

Edit 4

A revised demo has been created based on Rick Hitchcock's suggested solution.

Using jQuery:

//onresize:
var scrollAmount;

if (topNode.getBoundingClientRect().top >= 0) {
    scrollAmount = $(topNode).offset().top - topNode.getBoundingClientRect().top;
} else {
    scrollAmount = $(topNode.offset().bottom - topNode.getBoundingClientRect().bottom;
}
$(window).scrollTop(scrollAmount);

The demo may behave inconsistently across browsers, so I have also hosted it here. Additional fixes are required for IE, Opera, and Safari related to elementFromPoint.

Edit 3

Appreciation for your assistance, Rick Hitchcock. Your insights have been invaluable. As discussions veer towards cross-browser compatibility challenges, I've accepted your answer as it addresses the core question. Nonetheless, refinements are still needed regarding cross-browser considerations, topNode selection criteria, and handling cutoff elements.

An interesting scenario arises:

Upon further exploration, transitioning from a small viewport to a larger one can lead to unexpected behavior at the bottom of the page. If additional elements become visible due to the wider viewport, locking the topNode may not always work as intended. Resolving this anomaly requires careful consideration and testing, particularly concerning how Opera handles such scenarios.

These edge cases will be addressed systematically, starting with evaluating the impact of scroll bottoms and devising measures to ensure consistent behavior across different browsers.

javascript responsive-design scroll

Answer 1

Answer №1

Below is my latest creation:

(function(){
   var topNode;

   window.onscroll=function() {
     var timer;
     (function(){
        clearTimeout(timer);
        timer= setTimeout(
                 function() {
                   var testNode;
                   topNode= null;
                   for(var x = 0 ; x < document.body.offsetWidth ; x++) {
                     testNode= document.elementFromPoint(x,2);
                     if(!topNode || testNode.offsetTop>topNode.offsetTop) {
                       topNode = testNode;
                     }
                   }
                 },
                 100
               )
      }
     )();
   }

   window.onresize=function() {
     var timer;
     (function(){
        clearTimeout(timer);
        if(topNode) {
          timer= setTimeout(function(){topNode.scrollIntoView(true)},10);
        }
      }
     )();
   }
 }
)();

If there were a window.onbeforeresize() function, this would be more straightforward.

Please note that the script does not consider the scrolled position of the element's textNode. Handling this would require only resizing the height of the window. Resizing the width generally causes reformatting.

This code snippet has been tested and works seamlessly on Chrome, Firefox, IE, and Safari.

Edit

How it operates

The use of closures in the code keeps variables private, while timers prevent continuous execution during scrolling/resizing. To enhance understanding, here's another version that simplifies the code structure. It's worth mentioning that the timer within onscroll is necessary in IE due to an issue described here.

var topNode;

window.onscroll=function() {
  setTimeout(
    function() {
      var testNode;
      topNode= null;
      for(var x = 0 ; x < document.body.offsetWidth ; x++) {
        testNode= document.elementFromPoint(x,2);
        if(!topNode || testNode.offsetTop>topNode.offsetTop) {
          topNode = testNode;
        }
      }
    },
    100
  )
}

window.onresize=function() {
  if(topNode) {
    topNode.scrollIntoView(true)
  }
}

topNode tracks the element at the top of the screen as it scrolls.

The function scans from left to right along the 3rd row: document.elementFromPoint(x,2)*

It avoids scanning the 1st row because in IE, when scrollIntoView is used, the element shifts down slightly, making the previous element the new top-most one. This was discovered through trial and error.

Upon window resize, topNode is positioned at the top of the screen.

[*Initially, onscroll scanned left to right along the 11th row (in pixels) until finding an element with just one child. This child was often a textNode but not always. For example:

<div><ul><li>...<li>...<li>...</ul></div>

The div only had one child – the ul. If the scroll position was at the 50th li, scanning left to right incorrectly returned the div because of padding on lis.

The original code has since been updated. ]

Answer 2

Below is my latest creation:

(function(){
   var topNode;

   window.onscroll=function() {
     var timer;
     (function(){
        clearTimeout(timer);
        timer= setTimeout(
                 function() {
                   var testNode;
                   topNode= null;
                   for(var x = 0 ; x < document.body.offsetWidth ; x++) {
                     testNode= document.elementFromPoint(x,2);
                     if(!topNode || testNode.offsetTop>topNode.offsetTop) {
                       topNode = testNode;
                     }
                   }
                 },
                 100
               )
      }
     )();
   }

   window.onresize=function() {
     var timer;
     (function(){
        clearTimeout(timer);
        if(topNode) {
          timer= setTimeout(function(){topNode.scrollIntoView(true)},10);
        }
      }
     )();
   }
 }
)();

If there were a window.onbeforeresize() function, this would be more straightforward.

Please note that the script does not consider the scrolled position of the element's textNode. Handling this would require only resizing the height of the window. Resizing the width generally causes reformatting.

This code snippet has been tested and works seamlessly on Chrome, Firefox, IE, and Safari.

Edit

How it operates

The use of closures in the code keeps variables private, while timers prevent continuous execution during scrolling/resizing. To enhance understanding, here's another version that simplifies the code structure. It's worth mentioning that the timer within onscroll is necessary in IE due to an issue described here.

var topNode;

window.onscroll=function() {
  setTimeout(
    function() {
      var testNode;
      topNode= null;
      for(var x = 0 ; x < document.body.offsetWidth ; x++) {
        testNode= document.elementFromPoint(x,2);
        if(!topNode || testNode.offsetTop>topNode.offsetTop) {
          topNode = testNode;
        }
      }
    },
    100
  )
}

window.onresize=function() {
  if(topNode) {
    topNode.scrollIntoView(true)
  }
}

topNode tracks the element at the top of the screen as it scrolls.

The function scans from left to right along the 3rd row: document.elementFromPoint(x,2)*

It avoids scanning the 1st row because in IE, when scrollIntoView is used, the element shifts down slightly, making the previous element the new top-most one. This was discovered through trial and error.

Upon window resize, topNode is positioned at the top of the screen.

[*Initially, onscroll scanned left to right along the 11th row (in pixels) until finding an element with just one child. This child was often a textNode but not always. For example:

<div><ul><li>...<li>...<li>...</ul></div>

The div only had one child – the ul. If the scroll position was at the 50th li, scanning left to right incorrectly returned the div because of padding on lis.

The original code has since been updated. ]

`Monitoring and adjusting page view during window resizing in a dynamic website`

Answer №1

Edit

How it operates

Similar questions

What is the best way to retrieve a linked filter in Vue from another?

I'm not satisfied with the value of the ReactJs state after the change

Updating a section of a component using another component

The FormControlLabel radio button within the RadioGroup is experiencing difficulty in becoming selected

Organizing the dropdown menu in alphabetical order

How can I resolve the issue of a lengthy link spanning two lines in Internet Explorer, while displaying correctly in other browsers on a Bootstrap navigation

Modify the ColVis Appearance in Datatable Using JavaScript

Pass data from Wordpress plugin to JavaScript function

Transform a React component from a regular function to an ES6 class

Creating dynamic axes and series in Ext JS 4 on the fly

Struggling with the conundrum of aligning a constantly changing element amid the

Execute the knockout function using jQuery

"Although disabled, input elements can still be focused on in Firefox browser

An error of type 'TypeError' has occurred, where it is unable to access the property 'render' of an undefined element in

Tips for ensuring an animation is triggered only after Angular has fully initialized

Passing data from getServerSideProps to an external component in Next.js using typescript

Error Encountered: Unexpected Identifier in Angular 7 External jQuery Plugin

Transfer only certain directories located within the primary directory

When trying to bind an object that is constantly changing, one-way binding may not effectively capture those dynamic modifications

Can Authorization be Combined with Filtering in a Node.js RESTful API?