scrollTop不适用于溢出：css中的auto属性

Question

如果您发现此问题重复，请道歉，但我无法在StackOverflow上找到正确的答案。

我在css类中使用以下属性：

.panel{
     background: rgba(203, 203, 210, 0.15);
     position: relative;
     float: right;
     ...
     overflow: auto;
 }

当我使用$('body').animate({scrollTop: 10}, 500); JQuery函数将页面滚动到顶部时，它不起作用。当我将自动值替换为类似＆＃39;可见＆＃39;或者＆＃39;继承＆＃39;，它有效。页面结构虽然需要overflow属性。

有什么想法吗？

Answer 1

要在不删除溢出值的情况下按照您的规范执行此操作，可以将可滚动的.panel包装在包装器中并使用它。我已经把你的代码添加到我的代码笔中，唯一的区别是添加了包装器并且js相应地进行了调整。

https://codepen.io/c0un7z3r0/pen/Emgdbr

$(".button").click(function(){
  $("html, body").animate({ scrollTop: 0 }, "slow");
});

滚动到底部找到一个按钮，将您带回到顶部，您会注意到css与示例中发布的相同。我希望这会有所帮助。

Answer 2

我能用overflow:auto克服问题的唯一方法是临时增加页面高度并将高度重置为原始值，如下所示：

$('.panel').css({"min-height":"200%"});
$('body').animate({scrollTop: 10}, 500);
$('.panel').css({"min-height":"100%"});