实现-具有大量内容的可折叠不会滚动到选项卡的顶部 [英] Materialize - Collapsible with a huge content does not scroll to top of the tab

问题描述

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

您可以在这里尝试: 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>

我试图抓住事件并滚动到，但没有成功. 有什么想法吗?

解决方案

因此，在可使用性方面，由于手风琴效果的工作方式有些延迟，但这是使之起作用的一种方法.

>

$('.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秒以使手风琴折叠，否则它会滚动到事件触发点的标题位置(单击)大约是文本的一半(在已打开的手风琴部分下面打开标题时).

I use the collapsible component provide by materialize framework. I get one bug and have no idea how to solve it or find a workaround. If the content of one tab is too huge, when I open the tab it does not scroll to the top of the tab itself (it goes to the middle).

You can try it here : https://jsfiddle.net/r8314ouq/. Open the first tab then open the third tab you'll see that it doesn't scroll to the beggining of the tab.

I see But I would like to see It's very annoying because the user has to scroll to see all the content.

I followed the documentation to create my collapsible :

<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>

I tried to catch the event and do a scroll to but it didn't work. Any ideas?

解决方案

So in terms of use-ability, due to the way the accordion effect works there is some delay, but here is a way of making this work.

$('.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);
});

Here is your JSFiddle modified to work

The 500 is a half-a-second animation of scroll effect, meanwhile the 300 is around a 0.3 second delay to allow the accordion to collapse, otherwise it scrolls to the headers location at the point of the event firing (click) which is about half-way through the text (when opening a header below an already open accordion section).

这篇关于实现-具有大量内容的可折叠不会滚动到选项卡的顶部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！