Запуск привязки прокрутки CSS для чего-то другого, кроме прокрутки
Вот пример: https://codesandbox.io/s/spring-wood-0bikbb?file=/src/styles.css
Чтобы воспроизвести:
- сфокусировать ввод вверху
- прокрутите до самого низа, нажмите на пустое место
- обратите внимание, что экран возвращается вверх к цели привязки
То, что я определил, кажется, способствует этому:
- Окно прокрутки находится поверх пространства без цели привязки поблизости
- Ширина ввода изменяется при фокусе/размытии
Что делает демо:
- При фокусе/размытии ввода класс прикрепляется/удаляется из элемента-контейнера.
- Этот класс изменяет ширину контейнера
- Контейнер ввода — единственный элемент с установленным
scroll-snap-align.
Вопрос: что вызывает этот скачок и как его остановить?
Ответы 1
Кажется, вы наткнулись на ошибку хрома. В настоящее время они встречаются реже, но все же не так уж и редко. Мы склонны находить их в пограничных случаях новых (уже существующих) функций, и у нас нет другого выбора, кроме как обойти их.
Вот минимальный воспроизводимый пример, который воспроизводит вашу проблему в 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
Что касается вашего практического случая, что делать, чтобы этого избежать? Пока это не исправлено, вам нужно найти обходной путь. Это может включать (не проверено, но, вероятно, будет работать):
- включение привязки прокрутки только при определенных условиях (довольно стандартный обходной путь для других проблем, связанных с привязкой к прокрутке, которые Chrome имел в течение последних нескольких лет)
- заставить положение прокрутки при размытии ввода
- не изменять размер ввода
- добавить цель привязки ниже ввода
- изменить свой дизайн / функциональные требования
@rbhalla Мое первое замечание — это то, что мне пришлось сделать для веб-сайта, над которым я работал пару лет назад: горизонтальное слайд-шоу с привязкой прокрутки прокручивалось в поле зрения при загрузке его изображений (что вызывало изменение размера слайдов). Решение, которое я нашел в то время, состояло в том, чтобы отключить привязку прокрутки, пока слайд-шоу не было в области просмотра. Я не совсем уверен, как это может относиться к вашей конкретной ситуации... но, надеюсь, одно из этих предложений приведет вас к хорошему решению.
Спасибо, @Sheraff, отличный ответ, несмотря на то, что он неудачный, и спасибо за то, что включили сокращенный пример. Будет отмечен как ответ, если никто другой не выделит исправление до истечения срока действия вознаграждения. Не возражаете ли вы расширить свой первый обходной путь? Вы имеете в виду что-то вроде отключения привязки прокрутки, если что-то сфокусировано? Я также думаю, что добавление цели привязки — отличный обходной путь.