Scroll anchoring is a new technique implemented in browsers that automatically sets the scroll position in case new content is suddenly inserted on the top or below of the current section.
For example you were reading some content in a webpage but suddenly images are loaded into the top section (above your current reading position) — this will cause your "reading position" to be jumped down and you have to again scroll to reach that section of the page. Scroll anchoring prevents that by automatically shifting the scroll position accordingly so that your current reading position is not affected.
Browsers have automatically enabled scroll anchoring by default — you don't need to do anything to enable scroll anchoring behavior.
It may be rare, but sometimes you may require scroll anchoring to be turned off in a certain section of the page or in the whole document. This can be done using CSS, with the overflow-anchor property.
overflow-anchor can have two values :
- auto : Scroll anchoring is enabled. This is the default value that is set.
- none : Turn off scroll anchoring.
To prevent scroll anchoring on a specific element :
#container {
overflow-anchor: none;
}
To prevent scroll anchoring on the whole webpage :
body {
overflow-anchor: none;
}