Вот пример: https://codesandbox.io/s/spring-wood-0bikbb?file=/src/styles.css
Чтобы воспроизвести:
То, что я определил, кажется, способствует этому:
Что делает демо:
scroll-snap-align
.Вопрос: что вызывает этот скачок и как его остановить?
Кажется, вы наткнулись на ошибку хрома. В настоящее время они встречаются реже, но все же не так уж и редко. Мы склонны находить их в пограничных случаях новых (уже существующих) функций, и у нас нет другого выбора, кроме как обойти их.
Вот минимальный воспроизводимый пример, который воспроизводит вашу проблему в Chrome, но не в Safari или Firefox (macOS).
.main {
scroll-snap-type: y proximity;
height: 100vh;
overflow-y: scroll;
background: green;
}
.spacer {
height: 200%;
}
input {
width: 25%;
scroll-snap-align: start;
}
input:focus {
width: 50%;
}
<div class = "main">
<input type = "text" />
<div class = "spacer"></div>
</div>
Если вы хотите быть добросовестным гражданином Интернета, следующим шагом будет проверка в трекере ошибок хрома, сообщалось ли об этой ошибке уже или нет, и, если необходимо, самостоятельно сообщите о проблеме https://bugs.chromium. .org/p/chromium/issues/list
Что касается вашего практического случая, что делать, чтобы этого избежать? Пока это не исправлено, вам нужно найти обходной путь. Это может включать (не проверено, но, вероятно, будет работать):
@rbhalla Мое первое замечание — это то, что мне пришлось сделать для веб-сайта, над которым я работал пару лет назад: горизонтальное слайд-шоу с привязкой прокрутки прокручивалось в поле зрения при загрузке его изображений (что вызывало изменение размера слайдов). Решение, которое я нашел в то время, состояло в том, чтобы отключить привязку прокрутки, пока слайд-шоу не было в области просмотра. Я не совсем уверен, как это может относиться к вашей конкретной ситуации... но, надеюсь, одно из этих предложений приведет вас к хорошему решению.
Спасибо, @Sheraff, отличный ответ, несмотря на то, что он неудачный, и спасибо за то, что включили сокращенный пример. Будет отмечен как ответ, если никто другой не выделит исправление до истечения срока действия вознаграждения. Не возражаете ли вы расширить свой первый обходной путь? Вы имеете в виду что-то вроде отключения привязки прокрутки, если что-то сфокусировано? Я также думаю, что добавление цели привязки — отличный обходной путь.