Question

我正在尝试创建一个包含一堆块的页面（通常包含'overflow：hidden'文本，可以通过单击框来展开）。但是当我点击框调整其高度（显示所有文本）时，我还想通过使用ScrollTop将该框置于焦点。如果在浏览器窗口中它仍然不在视图范围内，则单击该框以展开其高度，这看起来很奇怪。

我有一个jQuery函数可以动画高度变化，并且可以很好地为ScrollTop重新定位设置动画效果，但是对于我来说它通常看起来很不稳定。这不一致。有时它非常平滑，有时它会调整盒子的高度然后非常突然地滚动，这会产生非常令人不快的笨拙生涩效果。添加到奇怪的行为，是在功能完成后我无法使用鼠标手动滚动窗口几秒钟。就像它阻止手动鼠标滚动一样。

我已经创建了一个小jsfiddle（我通常会在右侧框中放置文本）。

jsfiddle

$(document).ready(function() {
  $(".right").click(function() {
      var currentHeight = $(this).height();
      $(this).animate({
      height: (currentHeight == 100 ? 200 : 100)
      }, 400, function() {
      var offset = $(this).offset();
      $('html, body').animate({
          scrollTop: offset.top
      }, 1000);
      });
  });
});

Answer 1

也许我误解了你，但你设置的方式，高度会改变，然后完成后，它会以较慢的速度移动滚动位置。< / p>

你不想在同一时间和速度上做这些，而不是顺序吗？

$(".right").click(function () {

    var currentHeight = $(this).height();
    $(this).animate({
        height: (currentHeight == 100 ? 200 : 100)
    }, 400);

    var offset = $(this).offset();
    $('html, body').animate({
        scrollTop: offset.top
    }, 400);

});

演示：http://jsfiddle.net/NpdDN/

此外，这将在动画期间基本上“阻止”鼠标滚动，因为它会不断设置绝对滚动位置，覆盖鼠标所做的任何操作。

紧接着ScrollTop调整高度与jQuery非常生涩/不稳定

1 个答案: