无法在Next Js中将body.overflow设置为hidden后冻结滚动。

huangapple go评论72阅读模式
英文:

Unable to freeze the scroll after setting body.overflow to hidden in Next Js

问题

I am having this issue in my Next.js where I am unable to freeze the page from scrolling even after I set the document.body.style.overflow to hidden.

This is the code:
https://codesandbox.io/p/sandbox/gallant-leavitt-i0fz2c?file=%2Fpages%2Findex.tsx&selection=%5B%7B%22endColumn%22%3A28%2C%22endLineNumber%22%3A13%2C%22startColumn%22%3A27%2C%22startLineNumber%22%3A13%7D%5D

As you can see:
In lines 11-14 where I click the freeze button, it disables scrolling.
enter image description here

Result:
The page is still scrollable.

Please let me know the solution to this.

英文:

I am having this issue in my Nextjs where I am unable to freeze the page from scrolling even after I set the document.body.style.overflow to hidden.

This is the code:
https://codesandbox.io/p/sandbox/gallant-leavitt-i0fz2c?file=%2Fpages%2Findex.tsx&selection=%5B%7B%22endColumn%22%3A28%2C%22endLineNumber%22%3A13%2C%22startColumn%22%3A27%2C%22startLineNumber%22%3A13%7D%5D

As you can see:
In lines 11-14 where I click the freeze button, it disables scrolling.
enter image description here

Result:
The page is still scrollable.

Please let me know the solution to this.

答案1

得分: 1

You need to add position:fixed in addition to overflow:hidden.

document.body.style.cssText = "overflow: hidden; position: fixed;";

Preventing scrolling will lose the scroll position. So, when scrolling is reenabled, it will reset the scroll position to the top of the page instead of where the user left off. To prevent this, you need to set the scrollTop position.

const scrollTop = (document.documentElement || document.body).scrollTop;
document.body.style.cssText = `overflow: hidden; position: fixed; margin-top: -${scrollTop}px;`;

On unfreezing, set the scroll top value to the original scroll top value before the freeze. Store it in state or a variable so it can be used later.

const scrollTop = (document.documentElement || document.body).scrollTop; // original value to store in state or variable before freezing.

// After unfreezing, set back to the original value
document.documentElement.scrollTop = scrollTop;
document.body.scrollTop = scrollTop;
英文:

You need to add position:fixed in addition to overflow:hidden

document.body.style.cssText = "overflow: hidden; position:fixed;";

Preventing scrolling will lose the scroll position. So, when scrolling is reenabled, it will reset the scroll position to the top of the page instead of where the user left off. To prevent this, you need to set the scrollTop position.

const scrollTop = (document.documentElement || document.body).scrollTop;
document.body.style.cssText = `overflow: hidden; position:fixed; margin-top: -${scrollTop}px;`; // add here to prevent shifting content on freeze

On unfreezing, set the scroll top value to the original scroll top value before the freeze. Store it in state or a variable so it can be used later.

const scrollTop = (document.documentElement || document.body).scrollTop; // original value to store in state or variable before freezing.

//After unfreezing, set back to original value
document.documentElement.scrollTop = scrollTop;
document.body.scrollTop = scrollTop;

huangapple
  • 本文由 发表于 2023年4月11日 11:49:58
  • 转载请务必保留本文链接:https://go.coder-hub.com/75982263.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定