时间戳

首页 > 解决方案 > 如何清除浏览器的内存/页面滚动位置缓存？

html - 如何清除浏览器的内存/页面滚动位置缓存？

问题描述

更新：事实证明，问题出在浏览器缓存或以某种方式记忆窗口的垂直滚动位置时，我将浏览器窗口做得非常小，迫使客户区向上移动到客户矩形的顶部之外，导致负顶部位置属性值。当我完全关闭页面并通过粘贴 URL 在新选项卡中重新打开它时，我发现了这一点。请注意，即使使用SHIFT+R仅刷新页面也不会清除条件。

那么我如何自己清除/重置浏览器对页面滚动位置的“内存”，以便我注意这种情况并在它发生时干净地重置滚动位置？

我一直在努力让我的页面元素正确对齐。我当前的问题是 HTML 和 BODY 标记元素总是以负的top属性值结束，正如getBoundingClientRect()所报告的那样。这会导致子元素以不希望的方式垂直移动，并丢弃某些其他坐标和大小计算。

NOTE-1：我最终使用100vh作为height属性的原因是因为我尝试了大量的高度、最小高度组合，这些组合还涉及使用百分比和像素值。没有任何效果，我总是以offsetHeight属性的 0 高度值结束。因为我动态调整各种元素的大小，所以我需要知道该属性的实际值是多少，所以零高度值是一个分页符。使用100vh中的视口值格式是我尝试的唯一让我的offsetHeight属性非零值的方法。

NOTE-2：如您所见，我有一个绝对定位的 DIV 元素，它最终拥有一个 ThreeJS 画布区域。但是，我在 ThreeJS 画布附加到页面之前以及在 ThreeJS 元素初始化之前设置了一个断点，当我检查 HTML 和 BODY 元素的顶部值时，这些值已经是负数。所以我认为问题与使用 ThreeJS 无关。

鉴于下面的 HTML 和 CSS，为什么我会得到 HTML 和 BODY 标签元素的负值，我该如何解决？

html,
body {
  height: 100vh;
}

body {
  background-color: slategrey;
  margin: 0;
  overflow: hidden;
  width: 100%;
}

table#outer-table {
  width: 100%;
  min-height: 100%;
}

tr#tr-header {
  background-color: darkcyan;
  height: 100px;
}

tr#tr-game-area {}

tr#tr-button-row {
  background-color: darkkhaki;
  height: 100px;
}

a {
  color: #00B7FF;
}

div#div-threejs-canvas-area {
  width: 100%;
  height: 100%;
  position: absolute;
  /* Set the Z-order to something higher than normal so it's shown on top of the underlay table. */
  z-index: 10;
}
<html>

<head>
  <link rel="stylesheet" href="/stylesheets/style.css">

  <body>
    <script src="/javascripts/main.js"></script>
    <table id="outer-table">
      <tbody>
        <tr id="tr-header">
          <td id="td-header">
          </td>
        </tr>
        <tr id="tr-game-area">
          <td id="td-table-cat-cards">
          </td>
        </tr>
        <tr id="tr-button-row">
          <td id="td-button-row">
          </td>
        </tr>
      </tbody>
    </table>
    <div id="div-threejs-canvas-area"></div>
  </body>

</html>

标签： htmlcss

解决方案

推荐阅读