Блог

Мне нужно сделать так, чтобы прокрутка на теле и html-тегах была деактивирована, а вместо этого активировать прокрутку на дочернем элементе.

Поэтому у меня есть этот CSS в моем коде:

 html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
}
 

Мой код работает на рабочем столе правильно, однако проблема возникает, когда я запускаю веб-приложение в мобильных браузерах.

Я сделал пример кода в этой песочнице, и вы можете открыть его в своем мобильном браузере по этому URL https://7m390.csb.app/.

В чем проблема?

Откройте приложение на мобильном устройстве, затем вы увидите что-то вроде этого:

Затем наведите курсор на одно из полей ввода в нижней части страницы, чтобы открыть экранную клавиатуру.

Когда экранная клавиатура открыта, она подтолкнет элементы вверх, и элементы получат отрицательное положение y.

Теперь закройте экранную клавиатуру, элементы сохранят свое отрицательное положение y.

На этих фотографиях показано приложение на моем мобильном телефоне с удаленной отладкой Chrome, если вы откроете приложение с помощью мобильного эмулятора chrome, вы не увидите этой ошибки даже с его экранной клавиатурой!

В моем реальном приложении у меня есть оболочка, в которой включена прокрутка, и я установлю ее высоту при изменении размера страницы. Я поместил эту обертку сюда не для того, чтобы упростить проблему и прояснить источник проблемы.

Единственное, что мне нужно,-это предотвратить перемещение элементов в отрицательные положения при открытии экранной клавиатуры.