Блог

Главная - Вопросы по программированию - Прокрутка страницы изменяется, когда я скрываю элемент

Прокрутка страницы изменяется, когда я скрываю элемент

#javascript #jquery #css #scroll

#javascript #jquery #css #прокрутка

Вопрос:

Страница scrolltop страницы изменяется, когда я немного перемещаю прокрутку и скрываю элемент. (если scrolltop равно 0, этого не происходит). Условие является свойством родительского элемента {position: absolute; bottom:0; right: 0} , и я перемещаю прокрутку страницы.

Затем scrolltop перемещение вниз.

Почему это происходит?

 $('button.close').on('click', function(){
  $('.layer-content').css({display: 'none'})
});

$('button.show').on('click', function(){
  $('.layer-content').show()
}); 
 * {
  margin: 0;padding: 0;
}
.parent {
  position:relative;
  height: 300px;
  background: #d0d0d0;
}
.parent .layer {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 500px;
  background: #c0c0c0;
}
.parent .layer button {
  position: absoulte;
  top: 0;
  right: 0
    
} 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent">
  <button class="show">show</button>
  <div class="layer">
    <div class="layer-content">
      <button class="close">close</button>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint dolore necessitatibus cupiditate maiores, optio aut. A nisi possimus voluptate velit, voluptates repellendus dolorum, totam quia fuga neque, provident vel tempore?
    </div>
  </div>
</div>
<div>
  Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ullam, ex reprehenderit voluptatem velit totam, modi quae saepe ipsum tempora, vero labore. Minima voluptatem repudiandae accusantium fugiat veniam recusandae facere beatae.Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ullam, ex reprehenderit voluptatem velit totam, modi quae saepe ipsum tempora, vero labore. Minima voluptatem repudiandae accusantium fugiat veniam recusandae facere beatae.Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ullam, ex reprehenderit voluptatem velit totam, modi quae saepe ipsum tempora, vero labore. Minima voluptatem repudiandae accusantium fugiat veniam recusandae facere beatae.Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ullam, ex reprehenderit voluptatem velit totam, modi quae saepe ipsum tempora, vero labore. Minima voluptatem repudiandae accusantium fugiat veniam recusandae facere beatae.Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ullam, ex reprehenderit voluptatem velit totam, modi quae saepe ipsum tempora, vero labore. Minima voluptatem repudiandae accusantium fugiat veniam recusandae facere beatae.Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ullam, ex reprehenderit voluptatem velit totam, modi quae saepe ipsum tempora, vero labore. Minima voluptatem repudiandae accusantium fugiat veniam recusandae facere beatae.Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ullam, ex reprehenderit voluptatem velit totam, modi quae saepe ipsum tempora, vero labore. Minima voluptatem repudiandae accusantium fugiat veniam recusandae facere beatae.
</div>

Комментарии:

1. откройте инструменты разработчика и наблюдайте за изменением CSS при прокрутке и вызове различных функций jQuery. делайте это в течение часа или двух, и у вас появятся некоторые идеи.

2. я вычисляю высоту элемента .layer, которая становится равной 0 при нажатии кнопки закрытия. но я думаю, что это не имеет отношения к scrolltop страницы, потому что .parent имеет высоту 300 пикселей. я до сих пор не понимаю, почему scrolltop изменен.