0

我正在尝试创建一个包含一堆块的页面（通常包含“溢出：隐藏”文本，可以通过单击框展开）。但是，当我单击框以调整其高度（以显示所有文本）时，我还想通过使用 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);
      });
  });
});
4

1 回答 1

2

也许我误解了你，但是你设置它的方式，高度会改变，然后完成后，它会移动滚动位置，甚至速度更慢。

您不想同时以速度而不是按顺序执行这些操作吗？

$(".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/

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

于 2013-04-03T22:51:27.093 回答