Запуск привязки прокрутки CSS для чего-то другого, кроме прокрутки

Вот пример: https://codesandbox.io/s/spring-wood-0bikbb?file=/src/styles.css

Чтобы воспроизвести:

  • сфокусировать ввод вверху
  • прокрутите до самого низа, нажмите на пустое место
  • обратите внимание, что экран возвращается вверх к цели привязки

То, что я определил, кажется, способствует этому:

  • Окно прокрутки находится поверх пространства без цели привязки поблизости
  • Ширина ввода изменяется при фокусе/размытии

Что делает демо:

  • При фокусе/размытии ввода класс прикрепляется/удаляется из элемента-контейнера.
  • Этот класс изменяет ширину контейнера
  • Контейнер ввода — единственный элемент с установленным scroll-snap-align.

Вопрос: что вызывает этот скачок и как его остановить?

Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
0
0
56
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 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 имел в течение последних нескольких лет)
  • заставить положение прокрутки при размытии ввода
  • не изменять размер ввода
  • добавить цель привязки ниже ввода
  • изменить свой дизайн / функциональные требования

Спасибо, @Sheraff, отличный ответ, несмотря на то, что он неудачный, и спасибо за то, что включили сокращенный пример. Будет отмечен как ответ, если никто другой не выделит исправление до истечения срока действия вознаграждения. Не возражаете ли вы расширить свой первый обходной путь? Вы имеете в виду что-то вроде отключения привязки прокрутки, если что-то сфокусировано? Я также думаю, что добавление цели привязки — отличный обходной путь.

rbhalla 18.02.2023 18:28

@rbhalla Мое первое замечание — это то, что мне пришлось сделать для веб-сайта, над которым я работал пару лет назад: горизонтальное слайд-шоу с привязкой прокрутки прокручивалось в поле зрения при загрузке его изображений (что вызывало изменение размера слайдов). Решение, которое я нашел в то время, состояло в том, чтобы отключить привязку прокрутки, пока слайд-шоу не было в области просмотра. Я не совсем уверен, как это может относиться к вашей конкретной ситуации... но, надеюсь, одно из этих предложений приведет вас к хорошему решению.

Sheraff 18.02.2023 21:58

Другие вопросы по теме