时间戳

首页 > 解决方案 > HTML/Body 高度为 100%，水平滚动条控制中断 .animate

javascript - HTML/Body 高度为 100%，水平滚动条控制中断 .animate

问题描述

在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>

标签： javascriptjquerycss

解决方案

推荐阅读