Блог

Главная - Вопросы по программированию - HTML / Высота тела до 100% для прерывания управления горизонтальной полосой прокрутки .анимировать

HTML / Высота тела до 100% для прерывания управления горизонтальной полосой прокрутки .анимировать

#javascript #jquery #css

#javascript #jquery #css

Вопрос:

В Chrome (возможно, в других) я получаю конфликт между установкой горизонтальной полосы прокрутки в нижней части окна с html, body { height: 100%; } помощью и прокруткой jQuery .animate(). При нажатии кнопки «Прокрутка до #target» страница прокручивается в неправильном месте. Попробовали настройку html, body { min-height: 100% } , которая фиксирует прокрутку, но затем горизонтальная полоса прокрутки опускается ниже нижней части окна. Пожалуйста, сообщите.

Разметка:

         jQuery('button#scroll').click((e) => {
            e.preventDefault();

            jQuery('html, body').animate(
                { scrollTop: jQuery(`#target`).offset().top - 100 },
                200,
            );
        }); 
 html {
  overflow-x: hidden;
  height: 100%;
}

body {
  overflow-x: auto;
  position: relative;
  /* height: auto; */
  min-height: 100%;
  max-height: 100%;
}

html, body {
  height: 100%;
}

.wide-div {
  background: orange;
  height: 50px;
  width: 10000px;
}

.spacer {
  width: 100%;
  height: 2000px;
} 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
  <body>
    <button id="scroll">Scroll to #target</button>
    <div class="wide-div"></div>
    <div class="spacer"></div>
    <div id="target">Here's the target</div>
  </body>
</html>

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

1. Опубликованный вами код работает для меня. Можете ли вы попробовать свой код в режиме инкогнито (на случай, если это может быть вызвано расширением)?

2. @Saddy только что скорректировал стиль

Метки: