滚动条通过 CSS 动画/过渡出现

Posted 2023-02-19

【中文标题】滚动条通过 CSS 动画/过渡出现

【英文标题】：Scrollbar appears through CSS animation/transition

【发布时间】：2014-01-25 06:25:45

【问题描述】：

我在 Angular 中使用 cubic-bezier 转换为我的 ng-view 设置动画：

/* Animations */
.slide-animation.ng-enter, .slide-animation.ng-leave  
  -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
  -moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
  -o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
  transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;

  position:absolute;


.slide-animation.ng-enter 
  opacity:0;
  left:300px;
  overflow-y: hidden;
  overflow-x:hidden;


.slide-animation.ng-enter.ng-enter-active 
  opacity:1;
  left: 0;
  top: 0;


.slide-animation.ng-leave 
  opacity:0;
  left: 0;
  top: 0;


.slide-animation.ng-leave.ng-leave-active 
  opacity:0;
  left: 0;
  top: 0;

一切正常，除了在内容输入时出现的滚动条。它从右侧移动到左侧（如您在代码中所见）。

我想在动画期间隐藏滚动条。

我做错了什么？

【问题讨论】：

html，正文 溢出：隐藏 ?

但是没有滚动条...我想滚动我的内容。

好的，在动画之后设置溢出自动或尝试使用 css 剪辑......有点困难帮助你没有 html 页面的其余部分，css，......

【参考方案1】：

您需要在body css 中设置overflow:hidden。但请注意，添加它会隐藏所有溢出的内容，包括垂直滚动条，您不想这样做，因为如果高度溢出，页面内容将被隐藏。因此，如果您使用的是滑动过渡（横向）并且您只想隐藏过渡期间出现的水平滚动条，那么请改用它：

 body 
    overflow-x:hidden;  

这样，你只是隐藏了水平滚动条，垂直滚动条仍然可以工作。

【讨论】：

我遇到了同样的问题，但是在正文中设置overflow-x:hidden; 也删除了我的垂直滚动。为什么？

overflow-x:hidden; 不会移除垂直滚动。您的身体 css 中是否有另一个属性可以覆盖它？如果是，您可以通过添加overflow-y:scroll; 来手动覆盖它以显示垂直滚动。

我不知道为什么这是一个公认的答案，但overflow-x:hidden;不会像@Neel 所说的那样删除垂直滚动

【参考方案2】：

我遇到了同样的问题。我就是这样解决的（我以自己的代码为例）

HTML

<div class="team-box-2-info">
    <h4>John Doe</h4>
    <h6>Programmer</h6>
    <p class="team-box-2-desc">Lorem ipsum dolor sit amet consectetum...</p>
</div>

CSS

.team-box-2-desc 
    max-height: 0;
    overflow-y: hidden;
    transition: max-height 0.5s ease-out;

.team-box-2:hover .team-box-2-desc
    max-height: 350px;
    transition: max-height 1s ease-in;

JS

$('.team-box-2').hover(function()
    var element = $(this);
    setTimeout(function()
        element.find('p.team-box-2-desc').css('overflow-y', 'auto');
    , 1000);
, function()
    $(this).find('p.team-box-2-desc').css('overflow-y', 'hidden');
);

【参考方案3】：

html, body 
  max-width: 100%;
  overflow-x: hidden;

【讨论】：

虽然此代码可能会解决问题，包括 explanation 说明如何以及为何解决问题确实有助于提高帖子的质量。

【参考方案4】：

解决闪烁问题的两种方法（滚动条出现/消失时左右移动）

始终显示滚动条。

body 
  overflow-y: scroll;

这个 hack (info)

html  
  margin-left: calc(100vw - 100%); 
 

【参考方案5】：

这里有一个解决方案，可以在使用关键帧的过渡动画期间临时隐藏滚动条 https://css-tricks.com/hide-scrollbars-during-an-animation/