Запрет прокрутки страницы при изменении данных во вложенной прокрутке в Chrome - PullRequest
Новая
       1

Запрет прокрутки страницы при изменении данных во вложенной прокрутке в Chrome

4 голосов
/ 24 апреля 2019

У меня есть элемент фиксированного размера на странице с «переполнением: прокрутка», содержание которого часто меняется.Я ожидаю, что изменения, произошедшие внутри этого элемента, могут повлиять на прокрутку этого элемента, но не прокрутку страницы.

Но когда этот элемент вверху страницы, сама страница начинает прокручиваться.Как я могу предотвратить это?

Чтобы воспроизвести это поведение (у меня есть проблема в chrome, но Firefox работает нормально):

  1. open 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>

Ответы [ 3 ]

1 голос
/ 24 апреля 2019

Одно из хакерских решений - сохранить значение прокрутки перед добавлением контента и использовать его после: 

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>
0 голосов
/ 25 апреля 2019

В итоге я добавил пустой div с шириной 1px. Похоже, что chrome находит первый элемент сверху и перемещает прокрутку относительно этого элемента. Но мое решение довольно хакерское, и я не могу найти описание этого поведения ни в одной спецификации. 

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

https://jsfiddle.net/y3vtued6/

0 голосов
/ 24 апреля 2019

Это происходит потому, что вы удаляете элемент из DOM, а затем добавляете новый, так что вы меняете высоту элемента на секунду, страница прокручивается.

Вы должны заменить элемент, вместо этого удалив его.

например - и это не логично, что вы намеревались: 

setInterval(function() {
 $('.scrollable').children().first().replaceWith('<div>'+(Date.now())+'</div>');
}, 1000);

просто изменит элемент без изменения высоты или окна. Смещение

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...