Skip to content

Commit

Permalink
Avoid issue caused by using 'smooth' scroll-behavior
Browse files Browse the repository at this point in the history
  • Loading branch information
jackmoore committed Nov 20, 2022
1 parent 11637a0 commit 0b87b22
Show file tree
Hide file tree
Showing 6 changed files with 32 additions and 43 deletions.
3 changes: 3 additions & 0 deletions changelog.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,8 @@
## Changelog

##### v.5.0.2 - 2022-11-20
* Avoid issue caused by using 'smooth' scroll-behavior

##### v.5.0.1 - 2021-06-30
* Changed module field to point to new ESM bundle. Fixes #391, closes #393

Expand Down
2 changes: 1 addition & 1 deletion dist/autosize.esm.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

35 changes: 16 additions & 19 deletions dist/autosize.js
Original file line number Diff line number Diff line change
Expand Up @@ -90,52 +90,49 @@
ta.style.overflowY = value;
}

function getParentOverflows(el) {
function bookmarkOverflows(el) {
var arr = [];

while (el && el.parentNode && el.parentNode instanceof Element) {
if (el.parentNode.scrollTop) {
arr.push({
node: el.parentNode,
scrollTop: el.parentNode.scrollTop
});
el.parentNode.style.scrollBehavior = 'auto';
arr.push([el.parentNode, el.parentNode.scrollTop]);
}

el = el.parentNode;
}

return arr;
return function () {
return arr.forEach(function (_ref) {
var node = _ref[0],
scrollTop = _ref[1];
node.scrollTop = scrollTop;
node.style.scrollBehavior = null;
});
};
}

function resize() {
if (ta.scrollHeight === 0) {
// If the scrollHeight is 0, then the element probably has display:none or is detached from the DOM.
return;
}
} // remove smooth scroll & prevent scroll-position jumping by restoring original scroll position

var overflows = getParentOverflows(ta);
var docTop = document.documentElement && document.documentElement.scrollTop; // Needed for Mobile IE (ticket #240)

var restoreOverflows = bookmarkOverflows(ta);
ta.style.height = '';
ta.style.height = ta.scrollHeight + heightOffset + 'px'; // used to check if an update is actually necessary on window.resize

clientWidth = ta.clientWidth; // prevents scroll-position jumping

overflows.forEach(function (el) {
el.node.scrollTop = el.scrollTop;
});

if (docTop) {
document.documentElement.scrollTop = docTop;
}
clientWidth = ta.clientWidth;
restoreOverflows();
}

function update() {
resize();
var styleHeight = Math.round(parseFloat(ta.style.height));
var computed = window.getComputedStyle(ta, null); // Using offsetHeight as a replacement for computed.height in IE, because IE does not account use of border-box

var actualHeight = computed.boxSizing === 'content-box' ? Math.round(parseFloat(computed.height)) : ta.offsetHeight; // The actual height not matching the style height (set via the resize method) indicates that
var actualHeight = computed.boxSizing === 'content-box' ? Math.round(parseFloat(computed.height)) : ta.offsetHeight; // The actual height not matching the style height (set via the resize method) indicates that
// the max-height has been exceeded, in which case the overflow should be allowed.

if (actualHeight < styleHeight) {
Expand Down
2 changes: 1 addition & 1 deletion dist/autosize.min.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "autosize",
"description": "Autosize is a small, stand-alone script to automatically adjust textarea height to fit text.",
"version": "5.0.1",
"version": "5.0.2",
"keywords": [
"textarea",
"form",
Expand Down
31 changes: 10 additions & 21 deletions src/autosize.js
Original file line number Diff line number Diff line change
Expand Up @@ -83,20 +83,21 @@ function assign(ta) {
ta.style.overflowY = value;
}

function getParentOverflows(el) {
function bookmarkOverflows(el) {
const arr = [];

while (el && el.parentNode && el.parentNode instanceof Element) {
if (el.parentNode.scrollTop) {
arr.push({
node: el.parentNode,
scrollTop: el.parentNode.scrollTop,
})
el.parentNode.style.scrollBehavior = 'auto';
arr.push([el.parentNode, el.parentNode.scrollTop]);
}
el = el.parentNode;
}

return arr;
return ()=> arr.forEach(([node, scrollTop]) => {
node.scrollTop = scrollTop;
node.style.scrollBehavior = null;
});
}

function resize() {
Expand All @@ -105,28 +106,16 @@ function assign(ta) {
return;
}

const overflows = getParentOverflows(ta);
const docTop = document.documentElement && document.documentElement.scrollTop; // Needed for Mobile IE (ticket #240)

if (docTop) {
document.documentElement.style.scrollBehavior = 'auto';
}
// remove smooth scroll & prevent scroll-position jumping by restoring original scroll position
const restoreOverflows = bookmarkOverflows(ta);

ta.style.height = '';
ta.style.height = (ta.scrollHeight+heightOffset)+'px';

// used to check if an update is actually necessary on window.resize
clientWidth = ta.clientWidth;

// prevents scroll-position jumping
overflows.forEach(el => {
el.node.scrollTop = el.scrollTop
});

if (docTop) {
document.documentElement.scrollTop = docTop;
document.documentElement.style.scrollBehavior = null;
}
restoreOverflows();
}

function update() {
Expand Down

0 comments on commit 0b87b22

Please # to comment.