Materialize - 具有巨大内容的可折叠不会滚动到选项卡的顶部

Question

我使用由实现框架提供的可折叠组件.我得到一个错误,不知道如何解决它或找到一个解决方法.如果一个选项卡的内容太大,当我打开选项卡时,它不会滚动到选项卡本身的顶部(它会转到中间).

你可以在这里试试:https://jsfiddle.net/r8314ouq/.打开第一个选项卡,然后打开第三个选项卡,您将看到它不会滚动到选项卡的开始.

我知道了 但我想看看 这非常烦人,因为用户必须滚动才能看到所有内容.

我按照文档创建了我的可折叠:

<ul class="collapsible" data-collapsible="accordion">
    <li>
      <div class="collapsible-header"><i class="material-icons">filter_drama</i>First</div>
      <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
    </li>
    <li>
      <div class="collapsible-header"><i class="material-icons">place</i>Second</div>
      <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
    </li>
    <li>
      <div class="collapsible-header"><i class="material-icons">whatshot</i>Third</div>
      <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
    </li>
  </ul>

我试图捕捉事件并滚动到但它没有用.有任何想法吗？

Answer 1

因此，就可用性而言，由于手风琴效果的工作方式，存在一些延迟，但这里有一种实现此功能的方法。

$('.collapsible').collapsible({
  accordion : false // A setting that changes the collapsible behavior to expandable instead of the default accordion style
});

$('.collapsible .collapsible-header').on('click', function(event) {
    var target = $(this);
    setTimeout(function() {
      if( target.length ) {
        event.preventDefault();
        $('html, body').animate({
            scrollTop: target.offset().top
        }, 500);
      }
    }, 300);
});

这是你的 JSFiddle 修改后可以工作的

500 是半秒的滚动效果动画，同时 300 大约有 0.3 秒的延迟，以允许手风琴折叠，否则它会滚动到事件触发（单击）时的标题位置，大约是文本的一半（当在已打开的手风琴部分下方打开标题时）。