Question

我正在尝试测试Google素材网页组件的持久抽屉演示，但是采用rtl布局。

API：https://material.io/components/web/catalog/drawers/

演示：https://material-components-web.appspot.com/drawer/persistent-drawer.html

测试在Firefox所有视图和Chrome桌面视图中都成功，但在Chrome移动视图中失败。我试过Android手机我遇到了同样的问题。

问题是抽屉打开时它正确推动内容但不在窗口中移动，我必须使用触摸或鼠标继续移动。我不相信这是一个错误，因为我在CodePen中测试它是一个JsFiddle iframe，没关系

这是代码

<html class="mdc-typography" >
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Greeting App</title>
<link
        rel="stylesheet"
        href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<style>
    /* Ensure layout covers the entire screen. */
    html {
        border: 0;
        width: 100%;
        height: 100%;
        display: block;
        position: static;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    /* Place drawer and content side by side. */
    .demo-body {
        display: flex;
        flex-direction: row;
        padding: 0;
        margin: 0;
        box-sizing: border-box;
        height: 100%;
        width: 100%;
    }

    /* A simple menu button. */
    .demo-menu {
        background: none;
        border: none;
        width: 24px;
        height: 24px;
        padding: 0;
        margin: 0;
        margin-right: 24px;
        color: #FFF;
        box-sizing: border-box;
    }

    /* Stack toolbar and main on top of each other. */
    .demo-content {
        display: inline-flex;
        flex-direction: column;
        flex-grow: 1;
        height: 100%;
        box-sizing: border-box;
    }

    .demo-main {
        padding-left: 16px;
    }
</style>
</head>
<body class="demo-body mdc-typography" dir="rtl">
<aside class="mdc-persistent-drawer">
<nav class="mdc-persistent-drawer__drawer">
    <div class="mdc-persistent-drawer__toolbar-spacer"></div>
    <div class="mdc-list-group">
        <nav class="mdc-list">
            <a class="mdc-list-item mdc-persistent-drawer--selected" href="#">
                <i class="material-icons mdc-list-item__start-detail" aria-hidden="true">inbox</i>Inbox
            </a>
            <a class="mdc-list-item" href="#">
                <i class="material-icons mdc-list-item__start-detail" aria-hidden="true">star</i>Star
            </a>
            <a class="mdc-list-item" href="#">
                <i class="material-icons mdc-list-item__start-detail" aria-hidden="true">send</i>Sent Mail
            </a>
            <a class="mdc-list-item" href="#">
                <i class="material-icons mdc-list-item__start-detail" aria-hidden="true">drafts</i>Drafts
            </a>
        </nav>

        <hr class="mdc-list-divider">

        <nav class="mdc-list">
            <a class="mdc-list-item" href="#">
                <i class="material-icons mdc-list-item__start-detail" aria-hidden="true">email</i>All Mail
            </a>
            <a class="mdc-list-item" href="#">
                <i class="material-icons mdc-list-item__start-detail" aria-hidden="true">delete</i>Trash
            </a>
            <a class="mdc-list-item" href="#">
                <i class="material-icons mdc-list-item__start-detail" aria-hidden="true">report</i>Spam
            </a>
        </nav>
    </div>
</nav>
</aside>
<div class="demo-content">
<header class="mdc-toolbar mdc-elevation--z4">
    <div class="mdc-toolbar__row">
        <section class="mdc-toolbar__section mdc-toolbar__section--align-start">
            <button class="demo-menu material-icons">menu</button>
            <span class="mdc-toolbar__title catalog-title">Persistent Drawer</span>
        </section>
    </div>
</header>

<main class="demo-main">
    <h1 class="mdc-typography--display1">Persistent Drawer</h1>
    <p class="mdc-typography--body1">Click the menu icon above to open and close the drawer.</p>
</main>
<script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
<script>
    var drawerEl = document.querySelector('.mdc-persistent-drawer');
    var MDCPersistentDrawer = mdc.drawer.MDCPersistentDrawer;
    var drawer = new MDCPersistentDrawer(drawerEl);
    document.querySelector('.demo-menu').addEventListener('click', function() {
        drawer.open = !drawer.open;
    });
    drawerEl.addEventListener('MDCPersistentDrawer:open', function() {
        console.log('Received MDCPersistentDrawer:open');
    });
    drawerEl.addEventListener('MDCPersistentDrawer:close', function() {
        console.log('Received MDCPersistentDrawer:close');
    });
</script>
</div>
</body>
</html>

在Chrome中点击F12，然后点击移动视图图标

No frame example with mobile mode problem

CodePen same code in iframe working well

我相信代码中的规范化缺少样式，这是在codepen和jsfiddle中实现的，我需要在我的代码中实现

30/5/2017更新：

我能够克服使用以下JS，但我仍然不知道问题的根源。

 window.scrollTo(9999, 0); //inside MDCPersistentDrawer:open event listener

抽屉材料组件在铬rtl

0 个答案: