时间戳

首页 > 解决方案 > chrome中嵌套滚动中的数据更改时防止页面滚动

javascript - chrome中嵌套滚动中的数据更改时防止页面滚动

问题描述

我在带有“溢出：滚动”的页面中有一个固定大小的元素，其内容经常更改。我希望这个元素内部发生的变化会影响这个元素的滚动，但不会影响页面滚动。

但是当这个元素放在页面顶部时，页面本身就开始滚动了。我怎样才能防止这种情况？

要重现这种行为（我在 chrome 中遇到了这个问题，但 Firefox 工作正常）：

  1. 打开https://jsfiddle.net/hd2Ltmu0/2/
  2. 开始滚动页面到灰色元素的中心
  3. 稍等一下，页面滚动将向上移动

代码示例：

<body>
    <div style="overflow-y: scroll;height: 300px">
        Content that changes often
    </div>
    Content that should not move even the upper block is changed
</body>

标签： javascripthtmlcssgoogle-chrome

解决方案

一个 hacky 解决方案是在添加内容之前存储滚动的值并在之后使用它：

setInterval(function() {
 var s= $(window).scrollTop();
 $('.scrollable').children().first().remove();
 $('.scrollable').append('<div>'+(Date.now())+'</div>');
 $(window).scrollTop(s);
}, 1000);

;
.demo {
  font-size: 24px;
}

.scrollable {
  height: 300px;
  overflow-y: scroll;
  background: #eee;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="demo">
  String<br>
  String<br>
  String<br>
  String<br>
  <div class="scrollable">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
    <div>11</div>
    <div>12</div>
    <div>13</div>
    <div>14</div>
    <div>15</div>
</div>
  String<br>
  String<br>
  String<br>
  String<br>
  String<br>
  String<br>
  String<br>
  String<br>
  String<br>
  String<br>
  String<br>
  String<br>
  String<br>
  String<br>
  String<br>
  String<br>
  String<br>
  String<br>
  String<br>
  String<br>
  String<br>
  String<br>
  String<br>
  String<br>
  String<br>
  String<br>
  String<br>
  String<br>
  String<br>
  String<br>
  String<br>
  String<br>
  String<br>
  String<br>
  String<br>
  String<br>
  String<br>
  String<br>
  String<br>
  String<br>
  String<br>
  String<br>
  String<br>
  String<br>
  String<br>
  String<br>
  String<br>
  String<br>
  String<br>
  String<br>
  String<br>
  String<br>
  String<br>
  String<br>
  String<br>
  String<br>
</div>

推荐阅读