Question

我有三个div，每个div都有一些隐藏的内容。单击div时，通过向下滑动显示其内容。同时，我正在使用scrollTop使浏览器滚动到单击块的顶部。 HTML看起来像这样：

<div class="blocks block1"></div>
<div class="content block1_content"></div>

<div class="blocks block2"></div>
<div class="content block2_content"></div>

<div class="blocks block3"></div>
<div class="content block3_content"></div>

但是，我有部分scrollTop动画的问题。这是JS：

$('.blocks').on("click", function() {
  if (!$(this).hasClass('expanded')) {
    collapseExpandedFunction();

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

    $(this).addClass('expanded');

    $(this).next().slideDown();
  } else if ($(this).hasClass('expanded')) {
    collapseExpandedFunction();

  }
});

collapseExpandedFunction = function() {
  $('.blocks.expanded').removeClass('expanded');
  $('.content').slideUp();
};

我做了一个jsfiddle来更容易地演示问题：https://jsfiddle.net/ss53ckyk/3/

阐释：

如果您开始切换绿色块然后切换红色或蓝色，那就很好了。绿色内容被隐藏，而红色/蓝色显示并滚动到块的顶部。

问题是如果你从顶部开始向下移动。如果您首先切换红色，然后是蓝色或绿色，则浏览器将无法正确向下滚动。

我想要的另一件事是在完成scrollTop动画后使slideDown发生。

希望有人可以帮助我！

编辑：

一次只能看到一个块内容。例如，如果单击红色一次然后单击蓝色，红色内容应该向上滑动，而蓝色则显示。

Answer 1

javascript的异步性质导致了您的问题;即 .slidUp（）功能。触发此事件时，它会触发异步事件，该事件对函数的其余部分不会阻塞。因此，当 .slidUp（）函数正在执行时，animate top将在特定时刻拍摄DOM的快照。用.show（）和.hide（）替换.slidUp（）和.slidDown（）来解决此问题，但这并不能提供所需的响应能力。一种想法是捕获每个先前内容div的偏移量并在scrollTop函数中使用它。

Answer 2

编辑：

根据修改，您需要对代码进行一些调整，根据gapi.client计算scrolltop位置，并根据相应的scrollposition div

添加保证金

.content

以下是工作代码：https://jsfiddle.net/ss53ckyk/13/

scrollTop动画的问题

2 个答案: