如何在重新展开孩子时阻止Chrome“记住”容器的滚动条位置？

Question

我在使用Chrome的“功能”时遇到问题，当它的高度重新扩展到先前状态时，它会记住容器的滚动条位置。此功能干扰了我的应用程序将展开的项目滚动到视图中的能力。

要重现此问题，请打开Chrome并运行下面的代码段（如果您愿意，可以在CodePen上查看）

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  body: 0;
  height: 100%;
}

body {
  background: darkslategray;
}

.container {
  height: 300px;
  width: 500px;
  background: rgba(255, 255, 255, 0.2);
  margin: auto;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  overflow-y: auto;
  font-family: sans-serif;
  padding: 20px;
}

.item {
  display: block;
  margin-bottom: 20px;
}

.item>input {
  display: none;
}

.item>input:checked+.item-header:before {
  content: '-';
}

.item>input:checked~.item-content {
  display: block;
}

.item .item-header {
  display: block;
  padding: 20px;
  color: white;
  background: rgba(0, 0, 0, 0.8);
}

.item .item-header:before {
  display: inline-block;
  content: '+';
  width: 20px;
}

.item .item-content {
  display: none;
  padding: 20px;
  color: lightgray;
  line-height: 20px;
  background: rgba(0, 0, 0, 0.4);
}

<div class="container">

  <label class="item">
    <input type="checkbox"/>
    <span class="item-header">
      Item
    </span>
    <span class="item-content">
      Here is a bunch of content for this item. Lorem ipsum is no fun to use because it doesn't look like English. So I like to type text randomly, straight from the top. It's a nice activity to just let loose every now and then while developing.
    </span>
  </label>

  <label class="item">
    <input type="checkbox"/>
    <span class="item-header">
      Item
    </span>
    <span class="item-content">
      Here is a bunch of content for this item. Lorem ipsum is no fun to use because it doesn't look like English. So I like to type text randomly, straight from the top. It's a nice activity to just let loose every now and then while developing.
    </span>
  </label>

  <label class="item">
    <input type="checkbox"/>
    <span class="item-header">
      Item
    </span>
    <span class="item-content">
      Here is a bunch of content for this item. Lorem ipsum is no fun to use because it doesn't look like English. So I like to type text randomly, straight from the top. It's a nice activity to just let loose every now and then while developing.
    </span>
  </label>

  <label class="item">
    <input type="checkbox"/>
    <span class="item-header">
      Item
    </span>
    <span class="item-content">
      Here is a bunch of content for this item. Lorem ipsum is no fun to use because it doesn't look like English. So I like to type text randomly, straight from the top. It's a nice activity to just let loose every now and then while developing.
    </span>
  </label>

</div>

（1） 滚动到容器的底部，滚动条就在最后。

（2）单击最后一项以展开其内容。请注意当项目垂直展开时视图如何保持锚定在同一位置。这是理想的行为。

（3）现在滚动到最底部，项目仍然展开。

（4）现在通过单击折叠展开的项目。此时，视图将与步骤1中的视图完全相同。

我遇到的麻烦是Chrome“记得”扩展状态。现在扩展项目会将视图恢复为与步骤3中相同的状态。我想“重置”滚动位置，使其表现得就像您在步骤1中一样。

我尝试计算扩展前后项目和容器之间的offset（）。top之间的差异，以便我可以在扩展后手动调整滚动条位置，但Chrome在扩展前后都给出了相同的偏移值，所以它肯定做了一些奇怪的事情。

你们中的任何一位聪明人都可以找到一种方法来使用JavaScript来抵制Chrome中的这种行为吗？谢谢！

Answer 1

如果这是最近的一个错误，那么它可能与推出用于移动设备的Chrome最新功能的滚动锚定＆＃34;

有关。

https://blog.chromium.org/2017/04/scroll-anchoring-for-web-developers.html

现在，在你哭泣之前，他们已经足够让我们选择退出这种新行为了。您需要指定overflow-anchor CSS规则。

https://css-tricks.com/almanac/properties/o/overflow-anchor/

.your-container-which-has-the-scrollbar-in-it {
  overflow-anchor: none;
}

如果有帮助，请告诉我。