JQuery UI Slide动画触发滚动条在动画期间显示答案

【问题标题】：JQuery UI Slide animation triggering the scrollbar to display during the animationJQuery UI Slide动画触发滚动条在动画期间显示
【发布时间】：2017-02-02 18:29:12
【问题描述】：

我正在尝试使用 JQuery UI 的幻灯片动画来切换 div。
单击链接时，页面中的 div 会从右侧滑动（如本小提琴所示）。

$("#toggle").click(function(event) {
  event.stopPropagation();
  $("#slider").toggle("slide", {
    direction: "right"
  }, 300);
});

#toggle {
  font-weight: bolder;
  cursor: pointer;
}
#slider {
  z-index: 100;
  display: none;
  position: absolute;
  right: 0;
  top: 50px;
  width: 300px;
  height: 200px;
  padding: 20px;
  background: #DDD;
  border: 1px solid #000;
}

<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous">
  </script>
</head>

<body>
  <div id="toggle">
    click me to slide
  </div>
  <div id="slider">
    Slidin' in & Slidin' out
  </div>
</body>

</html>

我遇到的问题是动画期间出现的这个滚动条，我不希望它显示，就像在JQuery UI's website 中一样，他们没有这个滚动条问题，我不知道他们是怎么做到的.

如果可能的话，我想避免将#slider 包装到另一个容器中，我目前也不能将他的父级设置为overflow: hidden。

有没有简单的方法来解决这个问题？

【问题讨论】：

为什么不能在body 元素上设置overflow: hidden？ -> body { overflow: hidden; }
如果您不想永久设置，您可以在单击元素后立即设置overflow-x: hidden，并在动画完成后将其删除
不幸的是，我不能这样做，我需要身体的溢出保持自动，以便在必要时有一个滚动条：/隐藏溢出也不会这样做，因为它也会在动画持续时间内剪切内容（和所需）溢出。这个问题很棘手^^'感谢您的建议

标签： javascript jquery css jquery-ui

【解决方案1】：

最简单的解决方案是在body 元素上设置overflow: hidden。但是，由于您说您不能这样做，因此另一种解决方案是对元素的宽度进行动画处理，以使其看起来像是在滑入。实际上，元素的宽度只是增加/减少0 并且动画让它看起来像是在滑动。

在 jQuery 中，您可以使用 .animate() 方法执行此操作，并将 width 属性的值设置为 'toggle'。

$("#toggle").click(function(event){
  event.stopPropagation();

  $("#slider").animate({
    width: 'toggle'
  }, 200);
});

另外，你还可以防止文字用white-space: nowrap换行。

请参阅下面的完整示例：

$("#toggle").click(function(event){
  event.stopPropagation();
  
  $("#slider").animate({
    width: 'toggle'
  }, 200);
});

#toggle {
  font-weight: bolder;
  cursor: pointer;
}

#slider {
  white-space: nowrap;
  z-index: 100;
  position: absolute;
  right: 0;
  top: 50px;
  width: 300px;
  height: 200px;
  padding: 20px;
  background: #DDD;
  border: 1px solid #000;
}

<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
  <div id="toggle">
    click me to slide
  </div>
  <div id="slider">
    Slidin' in & Slidin' out
  </div>
</body>
</html>

【讨论】：

感谢您的回答，如果不是因为动画过程中内容的折叠效果，我会选择那个解决方案，在我有表格的情况下看起来不太好，文本，有时是表格。有没有办法纠正这个问题？
@eloism - 对于文本，您可以使用 white-space: nowrap、see this example。这似乎也解决了使用table 时的问题：jsfiddle.net/LnL38282
@eloism - 我尝试了更多元素，它似乎有效。见this example。