Как исправить поведение блока с position:fixed при скролле в мобильных браузерах?

Question

Владислав Дюжев @TheAnubisGod

Как исправить поведение блока с position:fixed при скролле в мобильных браузерах?

Здравствуйте. Суть:
Есть блок с position: fixed. Изначально он прикреплен к верху страницы, но при нажатии на него требуется переместить его вниз.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style>
html, body{
  padding: 0;
  margin: 0;
}

body{
    height: 200vh;
}

.block{
  position: fixed;
  top: 0;
  left: 0;
  height: 40px;
  width: 100%;
  background: #000;
  transition: 1s ease;
}

.active{
  top: 100%;
  transform: translateY(-100%);
}
</style>
</head>
<body>
  <div class="block"></div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js">
  </script>
  <script>
$(".block").on("click", function(){
  $(this).toggleClass("active")
})
  </script>
</body>
</html>

Все работает, но на мобильных браузерах, когда блок внизу, при скролле он"плывёт" выше или ниже. (f0457022.xsph.ru)

PS: Если при нажатии задавать свойство bottom:0, такого не происходит, но этот вариант не подходит, т.к. движение должно быть анимированным.

Вопрос задан более трёх лет назад
688 просмотров

Комментировать

Подписаться 1 Простой Комментировать

Пригласить эксперта

Ответы на вопрос 2

3 комментария

12 комментариев

Владислав Дюжев @TheAnubisGod Автор вопроса

Движение должно быть анимированным

Написано более трёх лет назад
kocherman @kocherman

Владислав Дюжев, тогда используйте { top: calc ( 100vh - 40px ); } но без transform

Написано более трёх лет назад
kocherman @kocherman

Владислав Дюжев, да! и просто напоминаю: в CSS-функции calc между значениями, скобочками и мат.операторами пробелы обязательны!

Написано более трёх лет назад
Владислав Дюжев @TheAnubisGod Автор вопроса

kocherman, К сожалению не помогло

Написано более трёх лет назад
kocherman @kocherman

Владислав Дюжев, Прошу прощения. 100vw надо заменить на 100vh.
В ответе исправил. https://jsfiddle.net/zc49jnt0/2/

Написано более трёх лет назад
Владислав Дюжев @TheAnubisGod Автор вопроса

kocherman, Я и так это сделал, но проблема не исчезла, эффект тот же.

Написано более трёх лет назад
kocherman @kocherman

Владислав Дюжев, Тогда вам надо отключить { transition: 1s ease } до/после анимации ( например, { transition: 0; } ) и включать его только на время анимации.
То есть, блок двигался вместе со скролом моментально, и оставался неподвижным по отношению к окну браузера, но вы растянули это движение за скролом на 1 секунду.

Написано более трёх лет назад
kocherman @kocherman

Владислав Дюжев, https://jsfiddle.net/pmg17ktv/

так работает нормально?

Написано более трёх лет назад
Владислав Дюжев @TheAnubisGod Автор вопроса

kocherman, Боюсь, что transition вообще ни при чем. При скролле вниз на месте элемнта появляется белая полоса, а при скролле вверх, он вообще пропадает, причем это длится пока не уберешь палец с экрана, потом элемент моментально оказывается на своем месте.

Написано более трёх лет назад
kocherman @kocherman
Я не понимаю, вы имеете в виду drag-n-drop срабатывает? - Запретите его!
И масштабирование запретите.
И здесь вы пропустили единицу

<meta name="viewport" content="width=device-width, initial-scale=">

<meta name="viewport" content="width=device-width, initial-scale=1">
Написано более трёх лет назад

kocherman @kocherman

Владислав Дюжев,
Попробуйте это

//uses document because document will be topmost level in bubbling
$(document).on('touchmove',function(e){
  e.preventDefault();
});
//uses body because jquery on events are called off of the element they are
//added to, so bubbling would not work if we used document instead.
$('body').on('touchstart','.scrollable',function(e) {
  if (e.currentTarget.scrollTop === 0) {
    e.currentTarget.scrollTop = 1;
  } else if (e.currentTarget.scrollHeight === e.currentTarget.scrollTop + e.currentTarget.offsetHeight) {
    e.currentTarget.scrollTop -= 1;
  }
});
//prevents preventDefault from being called on document if it sees a scrollable div
$('body').on('touchmove','.scrollable',function(e) {
  e.stopPropagation();
});

Написано более трёх лет назад

kocherman @kocherman

Владислав Дюжев,
Также нашел решение на чистом CSS:
https://www.bram.us/2016/05/02/prevent-overscroll-...

Написано более трёх лет назад