Javascript JQuery UI幻灯片动画在动画期间触发滚动条显示

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

$（“#切换”）。单击（函数（事件）{
event.stopPropagation（）；
$（“#滑块”）。切换（“滑块”{
方向：“对”
}, 300);
});
#切换{
字体大小：粗体；
光标：指针；
}
#滑块{
z指数：100；
显示：无；
位置：绝对位置；
右：0；
顶部：50px；
宽度：300px；
高度：200px；
填充：20px；
背景：DDD；
边框：1px实心#000；
}

单击我来滑动
滑入和滑出
最简单的解决方案是在
主体
元素上设置
溢出：隐藏
。但是，既然您说过不能这样做，另一种解决方案是设置元素宽度的动画，使其看起来像是在滑入。实际上，元素的宽度只是从
0
开始增加/减少，并设置动画使其看起来像是在滑动

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

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

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

此外，您还可以防止文本用
空格：nowrap
换行

请参见下面的完整示例：


$（“#切换”）。单击（函数（事件）{
event.stopPropagation（）；
$（“#滑块”）。设置动画({
宽度：“切换”
}, 200);
});
#切换{
字体大小：粗体；
光标：指针；
}
#滑块{
空白：nowrap；
z指数：100；
位置：绝对位置；
右：0；
顶部：50px；
宽度：300px；
高度：200px；
填充：20px；
背景：DDD；
边框：1px实心#000；
}

单击我来滑动
滑入和滑出
为什么不能在
正文
元素上设置
溢出：隐藏？->
body{overflow:hidden；}
只要单击元素并在动画完成后将其删除，就可以设置
overflow-x:hidden
，如果不想永久设置它，很遗憾，我不能这样做，我需要主体的溢出保持自动，以便在必要时有一个滚动条：/hidden overflow也不会这样做，因为它还会在动画持续时间内剪切内容（和所需的）溢出。这个问题很棘手^^谢谢你的建议谢谢你的回答，如果不是因为动画中内容的折叠效果，我会选择这个解决方案，在我的情况下，它看起来不是很好，因为有表单、文本，有时还有表格。有没有办法纠正这个问题？@eloism-对于文本，您可以使用
空白：nowrap
。这似乎也解决了同样使用
表时的问题：@eloism-我用了更多的元素尝试了它，它似乎起了作用。看见