Material design lite 导航标签自动滑动答案

【问题标题】：Material design lite navigation tabs autoslideMaterial design lite 导航标签自动滑动
【发布时间】：2018-08-03 15:52:32
【问题描述】：

我使用这个库https://getmdl.io/components/index.html#layout-section/tabs 来显示“可滚动标签”。我的问题是，当我选择箭头（右或左）下方的选项卡时，该选项卡选择得很好，但我们无法阅读所有单词。在本机应用程序上，我看到标签栏自动滚动以显示完整的选定标签。您知道使用该库执行此操作的方法吗？

您可以在此处查看示例：http://jsfiddle.net/fzngbjcw/2/

<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
    <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
</head>
<body>





    <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
        <header class="mdl-layout__header">
            <!-- Tabs -->
            <div class="mdl-layout__tab-bar mdl-js-ripple-effect">
                    <a href="#scroll-tab-1" class="mdl-layout__tab is-active">My tab label 1</a>
                    <a href="#scroll-tab-2" class="mdl-layout__tab">My tabulation label 2</a>
                    <a href="#scroll-tab-3" class="mdl-layout__tab">My tabulation label 3</a>
                    <a href="#scroll-tab-4" class="mdl-layout__tab">My tabulation label 4</a>
                    <a href="#scroll-tab-5" class="mdl-layout__tab">My tabulation label 5</a>
                    <a href="#scroll-tab-6" class="mdl-layout__tab">My tabulation label 6</a>

            </div>
        </header>
        <main class="mdl-layout__content">


        <section class="mdl-layout__tab-panel" id="scroll-tab-1">
            <div class="page-content">
            </div>
        </section>

        <section class="mdl-layout__tab-panel" id="scroll-tab-2">
            <div class="page-content">
            </div>
        </section>

        <section class="mdl-layout__tab-panel" id="scroll-tab-3">
            <div class="page-content">
            </div>
        </section>

        <section class="mdl-layout__tab-panel" id="scroll-tab-4">
            <div class="page-content">
            </div>
        </section>

        <section class="mdl-layout__tab-panel" id="scroll-tab-5">
            <div class="page-content">
            </div>
        </section>


        <section class="mdl-layout__tab-panel" id="scroll-tab-6">
            <div class="page-content">
            </div>
        </section>


    </main>
    </div>


</body>
</html>

谢谢

【问题讨论】：

标签： tabs material-design material-design-lite

【解决方案1】：

我不认为Material Design Lite 对视口之外的选项卡具有自动滚动功能（您可能已经在Material Components for the web 的选项卡演示中看到了该功能，这是开发人员现在关注的地方，已经放MDL 变为“有限支持”）。

也就是说，您可以在 MDL 中实现一些简单的自动滚动，当使用一些 js 单击部分位于视口之外的选项卡以检查单击的选项卡是否部分位于视口之外，然后触发点击相应的MDL 滚动按钮（因此您不必重新设计滚动行为）。请记住，MDL 会动态创建一些 html 元素，因此您必须在选择这些元素之前侦听 mdl-componentupgraded 事件。以下是一个工作示例：

const tabs = document.querySelectorAll('.mdl-layout__tab')
let left, right;

document.addEventListener('mdl-componentupgraded', function(event) {
  left = document.querySelector('.mdl-layout__tab-bar-left-button');
  right = document.querySelector('.mdl-layout__tab-bar-right-button');
});

for (let tab of tabs) {
  tab.addEventListener('click', function(event) {
    let bounding = event.target.getBoundingClientRect();
    if (bounding.left < 0) {
      left.click();
    } else if (bounding.right > window.innerWidth) {
      right.click()
    }
  });
}

<!DOCTYPE html>
<html>

  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
    <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
  </head>

  <body>

    <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">

      <header class="mdl-layout__header">
        <!-- Tabs -->
        <div class="mdl-layout__tab-bar mdl-js-ripple-effect">
          <a href="#scroll-tab-1" class="mdl-layout__tab is-active">My tab label 1</a>
          <a href="#scroll-tab-2" class="mdl-layout__tab">My tabulation label 2</a>
          <a href="#scroll-tab-3" class="mdl-layout__tab">My tabulation label 3</a>
          <a href="#scroll-tab-4" class="mdl-layout__tab">My tabulation label 4</a>
          <a href="#scroll-tab-5" class="mdl-layout__tab">My tabulation label 5</a>
          <a href="#scroll-tab-6" class="mdl-layout__tab">My tabulation label 6</a>

        </div>
      </header>

      <main class="mdl-layout__content">
        <section class="mdl-layout__tab-panel" id="scroll-tab-1">
          <div class="page-content">
          </div>
        </section>

        <section class="mdl-layout__tab-panel" id="scroll-tab-2">
          <div class="page-content">
          </div>
        </section>

        <section class="mdl-layout__tab-panel" id="scroll-tab-3">
          <div class="page-content">
          </div>
        </section>

        <section class="mdl-layout__tab-panel" id="scroll-tab-4">
          <div class="page-content">
          </div>
        </section>

        <section class="mdl-layout__tab-panel" id="scroll-tab-5">
          <div class="page-content">
          </div>
        </section>


        <section class="mdl-layout__tab-panel" id="scroll-tab-6">
          <div class="page-content">
          </div>
        </section>
      </main>

    </div>
    
  </body>

</html>

【讨论】：