在 FlexBox 中使用 ScrollTop 不起作用

Posted 2023-03-05

【中文标题】在 FlexBox 中使用 ScrollTop 不起作用

【英文标题】：Using ScrollTop in FlexBox does not work

【发布时间】：2018-03-12 05:13:00

【问题描述】：

nav、main、footer，共有 3 个标签。我将它们应用于 FlexBox：

body 
  color: #ddd;
  font-family: Gotham;
  background: url(../assets/body-background.png);
  display: flex;
  min-height: 100%;
  flex-direction: column;

main 
  flex: 1;

一切看起来都那么好。但在那之后事情变得更糟了

我的脚本文件中有以下代码（使用 jQuery）：

$('.scroll-top').click(function () 
  $('body').animate(
     scrollTop: 0
  , 1000);
)

但页面滚动动画不起作用

jsfiddle

$('a').click(function()
	$('body').animate(
      scrollTop: 0
    , 1000);
)

nav
  padding: 10px;
  background: grey;

main
  height:800px;
  background: lightgrey;

footer
  padding: 10px;
  background: grey;

body
  display: flex;
  min-height: 100vh;
  flex-direction: column;

main
  flex: 1;

a
  position: fixed;
  right: 40px;
  bottom: 40px;

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

<nav>nav content</nav>
<main>main content</main>
<a href="javascript:;">scroll top</a>
<footer>footer content</footer>

【问题讨论】：

已编辑问题jsfiddle.net/vcode/yex3199w

【参考方案1】：

它在 Chrome 中运行良好，但在 Firefox 中无法运行。要在 Firefox 中滚动，您必须在 html 上使用 scrollTop：

$('body,html').animate(
  scrollTop: 0
, 1000);

main 也不会占用您在 Firefox 中分配给它的 800px。将 flex: 1 更改为 flex: 1 1 800px 以获得相同的跨浏览器行为。

请看下面的演示：

$('a').click(function() 
  $('body,html').animate(
    scrollTop: 0
  , 1000);
)

nav 
  padding: 10px;
  background: grey;


main 
  height: 800px;
  background: lightgrey;


footer 
  padding: 10px;
  background: grey;


body 
  display: flex;
  min-height: 100vh;
  flex-direction: column;


main 
  flex: 1 1 800px; /* NEW */


a 
  position: fixed;
  right: 40px;
  bottom: 40px;

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

<nav>nav content</nav>
<main>main content</main>
<a href="javascript:;">scroll top</a>
<footer>footer content</footer>

【讨论】：

我实际上并没有使用 800px 作为主标签。我很容易写了800px。我实际上并没有使用 800px 作为主标签。我很容易写了800px。我尝试并尝试了您建议的脚本代码。非常感谢。

只需在 jquery 标记为我修复它之前添加“html”。谢谢！