`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

AngularJS Vimeo API Request Error: "401 Authorization Required"

"Enhance your Angular experience with SweetAlert integration using directives and translation

What could be the reason my black overlay doesn't show up when the button is clicked?

Organizing and managing one-on-one table tennis matches using a customized data structure. Leveraging the power of Vue, JavaScript, and

What is the designated color for highlighting an option in Next.js?

Steps for Building and Exporting a Next.js Project Without Minification and Optimization

Firebase will automatically log users out after one hour of inactivity

Issue with AJAX Complete event not functioning

Dealing with lag problems while feeding a massive dataset into the Autocomplete component of Material-UI

What is the method for inserting data into an array of objects in JavaScript?

Change every occurrence of span class red to be a strike tag

In React conditional return, it is anticipated that there will be a property assignment

How to incorporate both image and text links within an HTML div container using JavaScript

What is the syntax for implementing the 'slice' function in React?

How to modify a variable in the Config.json using a Discord.js command

What is preventing the addition of links to the navigation bar when using a sticky navigation bar?

Ascending and descending functions compared to Ext.getCmp()

Is anyone else experiencing issues with the jQuery slide-in not working on a particular website? How can I determine which version of jQuery is compatible with this site?

Clarification: Javascript to Toggle Visibility of Divs

Error encountered in jQuery's addClass and removeClass functions: Unable to read the property 'length' of an undefined value