Проблемы с position fixed у body

187

30 апреля 2018, 22:43

$('button').click(function() { 
  $('html,body').addClass('fixed'); 
}); 
$('close').click(function() { 
  $('html,body').removeClass('fixed'); 
});

.fixed { 
  position: fixed; 
} 
 
button { 
  margin-top: 1000px; 
} 
 
html { 
  overflow-x: hidden; 
  overflow-y: auto; 
  width: 100%; 
} 
 
body { 
  overflow-x: hidden; 
  overflow-y: auto; 
  width: 100%; 
  height: 100%; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<button>Click</button>

При открытии формы body присваивается position: fixed .Что бы устранить баг с ios при неправильном расположении курсора. При клике body автоматически листается в самый верх такое же происходит если убрать fixed. Как убрать автоматическую прокрутку вверх?

Answer 1

До нажатия на кнопку высота body равна высоте, необходимой чтобы вместить кнопку (100% не работает, высота в процентах работает только, если задана высота родителя или позиция absolute или fixed). Прокручивая вниз, вы прокручиваете html с автоматической высотой. Теперь вы прокрутили html до кнопки и по клику сделали html и body fixed. Без указания height для html, в котором у вас был скрол, он стал нулевой высоты и теперь вы прокручиваете body, который стал 100%, потому что он теперь fixed.

В начале вы прокручивали один элемент, затем второй. Установите html height: 100%, и вы всегда будете прокручивать body.