调整div大小时如何保持用户的滚动位置

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了调整div大小时如何保持用户的滚动位置相关的知识，希望对你有一定的参考价值。

我想为我正在制作的网站做一个很酷的菜单效果。我有一个div作为主要内容的部分。当用户打开菜单时，主内容div将调整大小并移开，显示菜单。但是，当我使用我编写的代码执行此操作时，它总是在页面上丢失我的滚动位置。有什么方法可以在页面收缩时保持我的位置，也可以在它再次向后扩展时保留在页面上？以下是我所拥有的。先感谢您！

function shrinkPage() {
   
   var element = document.getElementById("mock-body");
   element.classList.toggle("mock-body-on-burger");
   
   var z = document.getElementById("mock-body-container");
   z.classList.toggle("mock-body-container-on-burger");
   
   var x = document.getElementById("body");
   x.classList.toggle("body-on-burger");
};
body {
	margin: 0;
	background:#000;
}

.body-on-burger {
	max-width: 100%;
	overflow-x:hidden;
}

.mock-body-container{
	height:100vh;
}

.mock-body-container-on-burger {
	height:100vh;
	transform: scale(0.4) translate(130%);
	overflow: hidden;
}

.mock-body-size-change{
	overflow: scroll;
}

.mock-body {
	position:relative;
	background: #fff;
	margin-left: 50px;
}
  
.container {
	position: fixed;
	height:50px;
	width:50px;
	cursor: pointer;
}

.container #icon {
	width: 16px;
	height: 8px;
	position: relative;
	margin: 0px auto 0;
	top: 40%;
}

.container #icon .bars {
	height: 1px;
	background: #fff;
}

.myDiv {
	height:500px;
}

.one {
	background:red;
}

.two {
	background:green;
}

.three {
	background:blue;
}
<body id="body">



	<div class="menu-activator" onclick="shrinkPage()">
		<div class="container usd">
			<div id="icon">
				<div class="bars first"></div>
			</div>
		</div>
	</div>
	
	
	<div id="mock-body-container" class="mock-body-container">
		<div id="mock-body" class="mock-body">
			<div class="myDiv one"></div>
			<div class="myDiv two"></div>
			<div class="myDiv three"></div>
		</div>
 	</div>
   </body>
答案

请看下面的代码段。请注意如何使用overflow属性。

你必须滚动mock-body-container以保持其滚动位置。你正在滚动body，所以当你缩放mock-body-container时，没有什么可以在body中滚动而你放松了滚动位置。

function shrinkPage() {
   
   var element = document.getElementById("mock-body");
   element.classList.toggle("mock-body-on-burger");
   
   var z = document.getElementById("mock-body-container");
   z.classList.toggle("mock-body-container-on-burger");
   
   var x = document.getElementById("body");
   x.classList.toggle("body-on-burger");
};
body {
	margin: 0;
	background:#000;
}

.body-on-burger {
	max-width: 100%;
	overflow-x:hidden;
}

.mock-body-container{
	height:100vh;
  overflow:auto;
}

.mock-body-container-on-burger {
	height:100vh;
	transform: scale(0.4) translate(130%);
}

.mock-body-size-change{
	overflow: scroll;
}

.mock-body {
	position:relative;
	background: #fff;
	margin-left: 50px;
}
  
.container {
	position: fixed;
	height:50px;
	width:50px;
	cursor: pointer;
}

.container #icon {
	width: 16px;
	height: 8px;
	position: relative;
	margin: 0px auto 0;
	top: 40%;
}

.container #icon .bars {
	height: 1px;
	background: #fff;
}

.myDiv {
	height:500px;
}

.one {
	background:red;
}

.two {
	background:green;
}

.three {
	background:blue;
}
<body id="body">



	<div class="menu-activator" onclick="shrinkPage()">
		<div class="container usd">
			<div id="icon">
				<div class="bars first"></div>
			</div>
		</div>
	</div>
	
	
	<div id="mock-body-container" class="mock-body-container">
		<div id="mock-body" class="mock-body">
			<div class="myDiv one"></div>
			<div class="myDiv two"></div>
			<div class="myDiv three"></div>
		</div>
 	</div>
   </body>
另一答案

一旦你知道焦点的元素，它应该相对容易。如果你需要找到最后聚焦的元素，你可以使用scroll函数来实现。如果你需要这个，请告诉我，我会更新我的答案。

如果你知道#mock-body是焦点中的最后一个元素，只需在调整大小后回滚到它。

在这个例子中，我使用了jQuery，因为它使这种交互变得更容易，但是这也可以用vanilla JS完成（尽管更加冗长）。

$('html, body').animate({
  scrollTop: $('#mock-body').offset().top
}, 0); // If you want the animation to be smoother you can increase 0 to a higher number
另一答案

一种简单的方法是记住文档滚动的位置，并在返回“正常”视图时重新应用它：

let savedScroll; 

function shrinkPage() {
  let _s = (el) => document.querySelector(el),
      s_ = (d) => !d.classList.contains('body-on-burger'),
    x = _s('#body'),
    element = _s('#mock-body'),
    z = _s('#mock-body-container');

  if (s_(x)) {
    savedScroll = document.documentElement.scrollTop;
  }

  element.classList.toggle("mock-body-on-burger");
  z.classList.toggle("mock-body-container-on-burger");
  x.classList.toggle("body-on-burger");

  if (s_(x)) {
    document.documentElement.scrollTop = savedScroll;
  }
};

看看这个：

let savedScroll; 

function shrinkPage() {
  let _s = (el) => document.querySelector(el),
      s_ = (d) => !d.classList.contains('body-on-burger'),
    x = _s('#body'),
    element = _s('#mock-body'),
    z = _s('#mock-body-container');

  if (s_(x)) {
    savedScroll = document.documentElement.scrollTop;
  }

  element.classList.toggle("mock-body-on-burger");
  z.classList.toggle("mock-body-container-on-burger");
  x.classList.toggle("body-on-burger");

  if (s_(x)) {
    document.documentElement.scrollTop = savedScroll;
  }
};
body {
  margin: 0;
  background: #000;
}

.body-on-burger {
  max-width: 100%;
  overflow-x: hidden;
}

.mock-body-container {
  height: 100vh;
}

.mock-body-container-on-burger {
  height: 100vh;
  transform: scale(0.4) translate(130%);
  overflow: hidden;
}

.mock-body-size-change {
  overflow: scroll;
}

.mock-body {
  position: relative;
  background: #fff;
  margin-left: 50px;
}

.container {
  position: fixed;
  height: 50px;
  width: 50px;
  cursor: pointer;
}

.container #icon {
  width: 16px;
  height: 8px;
  position: relative;
  margin: 0px auto 0;
  top: 40%;
}

.container #icon .bars {
  height: 1px;
  background: #fff;
}

.myDiv {
  height: 500px;
}

.one {
  background: red;
}

.two {
  background: green;
}

.three {
  background: blue;
}
<body id="body">
  <div class="menu-activator" onclick="shrinkPage()">
    <div class="container usd">
      <div id="icon">
        <div class="bars first"></div>
      </div>
    </div>
  </div>


  <div id="mock-body-container" class="mock-body-container">
    <div id="mock-body" class="mock-body">
      <div class="myDiv one"></div>
      <div class="myDiv two"></div>
      <div class="myDiv three"></div>
    </div>
  </div>
</body>

以上是关于调整div大小时如何保持用户的滚动位置的主要内容，如果未能解决你的问题，请参考以下文章

调整从右侧固定位置的元素大小时出现问题

根据寡妇大小调整内容 div 的大小，其余元素将保持不变

使用窗口调整大小缩放固定位置 div 的宽度

如何使div（flexbox）在滚动时保持在固定位置（使用div做表）

旋转后调整大小时如何计算平移x和y值..？

页面的div中有滚动条，js实现刷新页面后回到记录时滚动条的位置