Привязка прокрутки CSS застревает при попытке увеличить масштаб
CSS-прокрутка-щелчок работает очень хорошо. Но когда вы прокручиваете на мобильном телефоне одним пальцем, а затем держите этот палец на экране и прокручиваете другим пальцем в противоположном направлении (например, масштабирование ↕), тогда щелчок прокрутки застревает. (независимо от того, в каком браузере)
Он работает даже на рабочем столе, когда вы удерживаете Ctrl во время прокрутки.
Я не знаю, является ли это распространенной проблемой, но я не могу найти никаких исправлений или обходных путей для этой проблемы.
Какие-либо предложения?
Попробуйте на себе:
<!DOCTYPE html>
<html lang = "en" dir = "ltr">
<head>
<meta charset = "utf-8">
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' />
<title></title>
<style media = "screen">
.container{
scroll-snap-type: y mandatory;
height: 50vh;
width: 50%;
overflow-y: scroll;
}
.content {
scroll-snap-align: center;
height: 50vh;
width: 100%;
}
</style>
</head>
<body>
<div class = "container">
<div class = "content" style = "background:blue;">
1
</div>
<div class = "content" style = "background:red;">
2
</div>
<div class = "content" style = "background:green;">
3
</div>
<div class = "content" style = "background:orange;">
4
</div>
</div>
</body>
</html>@kish Wdym? Это даже не полная ширина экрана.
Не могли бы вы использовать javascript для обходного пути? Или это должно быть только css?
@Sirence Только css, когда это возможно.
Ответы 1
(Редактировать: это не соответствующий ответ, потому что я неправильно понял вопрос.)
Я запустил ваш фрагмент кода в Firefox (v72) и не увидел описанного вами поведения. Затем я запустил его в Chrome (v79) и увидел проблемное поведение. Я использую Windows 10. (Кстати, хороший фрагмент.)
Лучший способ, которым я могу описать это, заключается в том, что после масштабирования страницы прокрутка элемента выходит из выравнивания с его родительским контейнером. Похоже, что прокрутка завершена, но затем она прокручивается и привязывается к другому элементу, из-за чего он выглядит так, как будто он застрял.
Похоже, это ошибка конкретного браузера. Я предполагаю, что это проблема Chrome/Blink.
Редактировать: Может быть, я вижу что-то другое, чем вы. Все, что я могу сделать, это поделиться тем, что я вижу.
Я могу воспроизвести ошибку на Firefox 72.0.1.
Я могу воспроизвести ошибку в Firefox 69, Firefox 72 и в Chrome минимум с Chrome 66. Также в новейшей версии Opera 67.0.3564.0
Когда вы нажимаете Ctrl во время прокрутки, а затем прекращаете прокрутку (масштабирование), поля остаются там, где они есть, до тех пор, пока вы снова не прокрутите в обычном режиме. Затем он исправляет себя (на каждом шаге масштабирования).
О, я вижу. Я неправильно понял шаги ошибки. Теперь, когда я пытаюсь сделать то же самое, я вижу то же самое поведение. Очень интересно. Я подумываю удалить свой ответ.
не делайте это на всю ширину экрана.