如何用平移效果模拟jQuery的slideToggle功能？

当然可以实现。你遇到的问题本质是jQuery的slideToggle通过动态修改元素高度+overflow属性实现动画，这会导致内容区域尺寸变化，滚动条随之消失/出现。要实现整体平移且内容固定的效果，我们可以通过修改元素的位置偏移量完成，保持元素自身尺寸不变。

解决方案思路 #

核心是让元素通过位置平移（而非高度变化）实现显示/隐藏：

• 固定元素的高度，确保内容区域尺寸始终不变，滚动条持续存在
• 利用CSS过渡或jQuery动画，修改元素的bottom属性（因元素是fixed定位在底部），让它从视口外滑入/滑出

完整代码示例 #

HTML（无需修改）

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

<button id="but">Click</button>

<div id="block">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut porta tempor purus. Vivamus fermentum dolor mauris, et luctus elit congue quis. Maecenas lobortis pharetra posuere. Donec a odio odio. Mauris at faucibus elit. Vestibulum porta nibh diam, at finibus ante auctor sit amet. Duis et vulputate purus. Curabitur ante ipsum, eleifend nec augue sit amet, varius condimentum mauris. Pellentesque non ante in nisl pellentesque mattis. Sed lorem arcu, malesuada eu risus vel, iaculis aliquet orci.</p>
  <p>Ut ac dictum sapien. In hac habitasse platea dictumst. Ut vitae placerat ipsum. Mauris tellus enim, tincidunt id ultrices sit amet, hendrerit at tortor. Vivamus porttitor arcu vel felis eleifend blandit. Suspendisse a vehicula purus. Maecenas condimentum massa nec metus euismod blandit. Suspendisse hendrerit et dui id bibendum. Mauris efficitur nunc tempus, tincidunt lorem ac, lacinia nisl. Fusce sagittis dui ut ornare suscipit. Aliquam cursus eros quis felis pulvinar lobortis. Proin eu est id odio lobortis fringilla. Ut ac auctor sem. Cras eget turpis lectus. Morbi volutpat justo magna, at tempus nisi vulputate ac.</p>
  <p>Cras eget nulla semper, tincidunt turpis in, congue augue. Duis fringilla ac ante malesuada egestas. Fusce commodo lacinia ex non volutpat. Donec ac arcu quis risus eleifend dapibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce euismod eget felis feugiat blandit. Vestibulum suscipit nulla in ligula iaculis, eget fermentum enim tincidunt. Nunc eget dui lacus. Curabitur et odio finibus, auctor neque non, sagittis velit. Etiam faucibus justo eget est luctus vehicula.</p>
</div>

CSS（关键修改）

#block {
  text-align: justify;
  position: fixed;
  bottom: -8em; /* 初始状态隐藏在视口底部外 */
  max-width: 35em;
  height: 8em; /* 固定高度，替代max-height，确保内容区域尺寸稳定 */
  border: solid 1px;
  overflow: auto;
  transition: bottom 2s ease; /* CSS过渡实现平滑动画 */
}

/* 激活状态：元素滑入视口 */
#block.active {
  bottom: 0;
}

JavaScript（简洁切换类）

$('#but').click(function() {
  $('#block').toggleClass('active');
});

关键说明 #

1. 固定高度：将max-height改为height，确保元素内容区域的尺寸始终不变，滚动条不会因为动画消失。
2. 位置平移：通过修改bottom属性控制元素在视口内的显示/隐藏，动画过程中元素整体平移，内容完全固定。
3. 兼容备选方案：如果需要兼容旧浏览器，可改用jQuery的animate方法替代CSS过渡：

$('#but').click(function() {
  const block = $('#block');
  if (block.css('bottom') === '0px') {
    block.animate({ bottom: '-8em' }, 2000);
  } else {
    block.animate({ bottom: '0' }, 2000);
  }
});

内容的提问来源于stack exchange，提问作者Jellby