Przeglądarka Chrome automatycznie przewija zawartość (gdy nikt o to nie prosił).

Mamy bogatą stronę, na której mamy jeden mały blok z dynamiczną zawartością. Do niedawna wszystko działało dobrze.Przeglądarka Chrome automatycznie przewija zawartość (gdy nikt o to nie prosił).

Teraz przeglądarka Chrome w jakiś sposób "przechwytuje" jeden element div na stronie i przewija całą zawartość. Trudno to wyjaśnić słowami, ale o wiele łatwiej je zademonstrować.

Oto strona testowa. Po prostu otwórz go w Chrome i przewiń nieco w dół, aby jedno z niebieskich pól znalazło się na bardzo górnej granicy widocznego obszaru. Zobaczysz, że cała zawartość (numery 1,2,3 ..) przewija się sama, gdy niebieskie pole pozostaje w tym samym miejscu.

Może to wyglądać logicznie w tym prostym przykładzie, ale należy wziąć pod uwagę, że blok dynamiczny jest tylko jednym z wielu bloków na stronie i nie ma powodu, aby przewijać całą treść, ponieważ coś zmienia się wewnątrz bloku.

<html> 
<body> 

<div id="x" style="border:solid 1px red;width:200;height:200"> 
</div> 

1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br> 
11<br>12<br>13<br>14<br>15<br>16<br>17<br>18<br>19<br>20<br> 
1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br> 
11<br>12<br>13<br>14<br>15<br>16<br>17<br>18<br>19<br>20<br> 
1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br> 
11<br>12<br>13<br>14<br>15<br>16<br>17<br>18<br>19<br>20<br> 
1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br> 
11<br>12<br>13<br>14<br>15<br>16<br>17<br>18<br>19<br>20<br> 


<script> 
setInterval(function() { 
    var e = document.createElement('div'); 
    e.setAttribute("style", "border:solid 2px blue;width:100px;height:20px"); 

    var x = document.getElementById('x'); 
    x.insertBefore(e, x.childNodes.length?x.childNodes[0]:null); 
}, 1000); 

</script> 

</body> 
</html>

Właśnie odkryliśmy dziwny behawior Chrome w tym tygodniu. Kod działał dobrze przez ostatnie 6 miesięcy, więc myślę, że jest to coś nowego, co zrobił Chrome. Wszystkie inne przeglądarki działają poprawnie.

== == AKTUALIZACJA

Korzystanie Chrome (mam najnowszą v. 56.0.2924.87 (64-bit)) do http://www.thefreedictionary.com/ i przewiń w dół, aż "na żywo" (pole wyszukiwania z ruchomymi słów) pojawia się na samej górze przeglądarki. Przekonasz się, że zamiast normalnego zachowania cała strona zaczyna się poruszać.

Źródło

2017-02-17 Mike Keskinov

Platforma? Wersja? Nie przewija 56.0.2924.87 dla systemu Linux. – Mike

Windows 10, Chrome w wersji 56.0.2924.87 (64-bitowy). Udało nam się również odtworzyć na różnych komputerach i mamy wiele raportów użytkowników. –

Przeszukano element, w który się wstawiasz, jest to logiczne zachowanie przeglądarki, które próbuje zachować twoją bieżącą rzutnię, podczas gdy elementy są dodawane powyżej –

To może się dziać z powodu przewijania kotwienia cechą chromem 56, https://developers.google.com/web/updates/2016/04/scroll-anchoring, https://www.chromestatus.com/feature/5700102471548928

obejście rozwiązać ten problem jest ustawienie overflow-anchor: none; na elementu nadrzędnego. Dla twojego odniesienia strona internetowa:

#dvLiveSearch{ 
    overflow-anchor: none; 
}

Naprawiłoby to dziwne zachowanie na chrome.

Źródło

2017-03-02 18:00:04 azs06

Świetna odpowiedź! Masz nagrodę! –

@MikeKeskinov musisz ręcznie oddać nagrodę lub czek. Jeśli tego nie zrobisz, otrzyma tylko połowę nagrody. Druga połowa zniknie. –

Nie martw się, masz to :) –

Przeglądarka Chrome automatycznie przewija zawartość (gdy nikt o to nie prosił).

Odpowiedz

Powiązane problemy