如何设置溢出：隐藏但仍然使滚动条可见？

Question

当显示模态时，我将一个带overflow: hodden的类添加到body标签中。因此模态背后的内容不是滚动。一切都很好。

BUT

如果原始页面足够大以具有滚动条，那么当我打开模态时，我可以看到页面向右移动。我找出了这种行为的原因。 Overflow: hidden导致滚动条消失，这就是为什么它向右移动~10px。

我的问题是如何解决这个问题。实际上，我需要应用overflow:hidden但仍然显示滚动条。

Answer 1

＆＃13;

＆＃13;

(function() {
	let _scrollPosition;

	function preventScroll(e) {
		e.preventDefault();
		window.scroll(..._scrollPosition);
	}

	function lock() {
		_scrollPosition = [window.pageXOffset, window.pageYOffset];
		$(window).on('scroll touchmove', preventScroll);
	}

	function unlock() {
		$(window).off('scroll touchmove', preventScroll);
	}

	return {
		lock,
		unlock
	};
})();

＆＃13;

＆＃13;

＆＃13;

只要使用此代码打开模态，就可以锁定滚动位置。