Question

我目前正在处理一个页面。我使用了聚合物的纸抽屉面板和纸头板组合。

基本上有两个容器，内部容器需要水平滚动，而外部容器需要垂直滚动。当我没有使用纸质标题面板时，行为是合适的。您可以看到演示here。如果您在移动浏览器上打开此网站（chrome或其他/避免使用Safari检查）或在Chrome中的移动模拟器上打开，我可以水平滚动也可以垂直滚动。这是我预期的行为。

但是，当我添加paper-header-panel（我的自定义元素<app-layout>的一部分）时，我能够水平滚动（在移动浏览器中）但是当我触摸水平存在的元素时可滚动的div并尝试垂直滚动它，就像前一种情况一样，垂直滚动不再起作用。该演示存在here。

app-layout元素的相关源代码如下所示。

html -

<dom-module id="app-layout">

  <link rel="import" type="css" href="app-layout.css">

  <template>

    <paper-drawer-panel id="drawerPanel" responsive-width="1024px" drawer-width="280px">

      <paper-header-panel class="list-panel" drawer>

        <!-- List Toolbar -->
        <div class="paper-header has-shadow layout horizontal center" id="navheader">
        </div>

        <!-- Menu -->
        <div class="left-drawer">
        <paper-menu class="list" selected="0" on-iron-activate="_listTap">
        <template is="dom-repeat" items="{{menus}}">
        <paper-item role="menu"><iron-icon class="menuitems" icon$={{item.icon}}></iron-icon><span>{{item.label}}</span></paper-item>
        </template>
        </paper-menu>
        </div>
      </paper-header-panel>

      <paper-header-panel class$="{{positionClass}}" main mode="{{mainMode}}">

        <!-- Main Toolbar -->
        <paper-toolbar class$="{{toolbarClass}}">
          <paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button>
          <div style="width:60px" id="app-image"><iron-image style="width:40px; height:40px; background-color: lightgray;"
      sizing="contain" preload fade src= "/images/app-icon-110.png"></iron-image></div>
          <div hidden$="{{_isMobile}}" class="flex">{{label}}</div>
          <div class="flex"></div>
          <paper-icon-button icon="search" on-tap="toggleSearch"></paper-icon-button>
          <paper-icon-button icon="more-vert"></paper-icon-button>
        </paper-toolbar>

        <div class="content">

          <paper-material>
            <content select=".main-content"></content>
          </paper-material>

        </div>

      </paper-header-panel>

    </paper-drawer-panel>

  </template>
</dom-module>

CSS -

* { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
     box-sizing: border-box; 
}
:host {
    width: 100%;
    height: 100%;
    -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
    display: block;
}


#drawerPanel {
    --paper-drawer-panel-left-drawer-container: {
      background-color: #eee;
    };
}

paper-header-panel {
  background-color: #eee;
}

paper-toolbar {
  background-color: #00bcd4;
}

.left-drawer {
  background-color: #eee;
}

paper-header-panel .content {
  height: 100%;
}

paper-header-panel[mode=cover] .content {
  padding: 0 90px 0 0px;
  height: 100%;
}

paper-header-panel {
  --paper-header-panel-cover-container: {
    height: 100%;
    left: 90px;
  };
}

paper-header-panel[mode=cover] paper-toolbar {
  color: #fff;
  font-size: 20px;
  font-weight: 400;
  padding-right: 16px;
}

.paper-header-panel paper-toolbar #app-image {
  margin-left: -15px;
}

paper-material {
  overflow-y: auto;
  height: auto;
  background-color: #fff;
  z-index: 1;
}

paper-header-panel[mode=cover] paper-material {
  max-width: 1024px;
  margin: 64px auto;
}

Answer 1

来自我们的评论，

作为替代解决方案，在您发现问题之前，您可以使用Iscroll 5进行卡片的水平滚动测试，看看它是否在App中正常工作。

我使用Iscroll 5作为我的应用程序，使用水平和垂直滚动，100个项目和快速聚合物。到目前为止我没有遇到任何性能问题，尽管我在iscroll选项中反弹，例如,bounce: false以获得额外的性能提升

如果您有卡片的Click事件，请将,click:true添加到Iscroll选项

Iscroll 5指南http://iscrolljs.com/

当用户在那里水平滚动以节省资源时，演示会为任何行创建Iscroll，而我的评论中的原始演示用于内置滑动检测的JQM框架。

在Polymer版本0.5中，它内置了Touch功能，不确定版本1但我从未使用过https://www.polymer-project.org/0.5/docs/polymer/touch.html

对于Polymer我创建了另一个Demo，它使用Javascript Touch事件来检测水平移动，这样你就不需要任何其他Touch Touch插件来添加到App中

演示我为代码初始化设置了5秒的延迟。几乎所有代码都用于处理Touch。在function slide(x) {中，Iscroll代码约为10行

http://codepen.io/anon/pen/pJRmLo

<强>代码

    var slides = 17; //how many items in a row
    var totalwidth = slides * 80; //times that by the width of each item in a row

    $(".scroller").css("width", totalwidth+"px"); //set the total width of the horizontal wrapper

   // touch function 
    var startPos;
        var handlingTouch = false;
        var itemis;
        setTimeout(function() {

        document.addEventListener('touchstart', function(e) {
          // Is this the first finger going down? 

          if (e.touches.length == e.changedTouches.length) {
            startPos = {
              x: e.touches[0].clientX,
              y: e.touches[0].clientY
            };
          }
        });

        document.addEventListener('touchmove', function(e) {
          // If this is the first movement event in a sequence:
          if (startPos) {
            // Is the axis of movement horizontal?
            if (Math.abs(e.changedTouches[0].clientX - startPos.x) > Math.abs(e.changedTouches[0].clientY - startPos.y)) {
              handlingTouch = true;
              e.preventDefault();
              onSwipeStart(e);
            }
            startPos = undefined;
          } else if (handlingTouch) {
            e.preventDefault();
            onSwipeMove(e);
          }
        });

        document.addEventListener('touchend', function(e) {
          if (handlingTouch && e.touches.length == 0) {
            e.preventDefault();
            onSwipeEnd(e);
            handlingTouch = false;
          }
        });



        function slide(x) {

    var cclass = $(itemis).attr("class")
    var ccclass = "."+cclass;
    var newis = $(itemis).attr("data-id"); 

    if (newis != "running") {
    var cclass = new IScroll(ccclass, {
        eventPassthrough: true, 
        scrollX: true, 
        scrollY: false, 
        preventDefault: false
        });
    cclass.scrollBy(-50, 0, 500);
    //control here how many pixels to auto scroll uppon activating the scroll eg -50px
    $(itemis).attr("data-id","running")   
        }
        }

        var swipeOrigin, x, itempos;
        function onSwipeStart(e) {

    // find what element is been touched. In your case it may be closest("swElement") but you need to test

          itemis = $(e.target).closest("div");
          // when touching over an element get its target, in this case the closest div of the row

          swipeOrigin = e.touches[0].clientX;
        }
        function onSwipeMove(e) {
          x = e.touches[0].clientX - swipeOrigin;
         // slide(x);
        }
        function onSwipeEnd(e) {

        //On Touch End if x (distance traveled to the right) is greater than +35 pixels then slide element  +100 pixels.

          if (x > 35) { 
        slide(0);
          }
          else {
          slide(0);
        }
        }
        }, 5000);

上面的触摸功能我最初用于通过触摸拖动来转换/移动列表项，类似于Gmail App，用于JQM和Polymer列表项。在Iscroll没有真正以这种方式使用的情况下可以横向用于任何东西但它基本上说如果你触摸一行水平移动激活该行的Iscroll

在链接中查看我的演示，以获取该功能的替代用法。

jQuery touchSwipe event on element prevents scroll

Answer 2

问题出现是因为在移动设备上，当垂直滚动处于活动状态时水平滚动被禁用，反之亦然。我现在使用Tasos建议使用iScroll来解决这个问题。我使用聚合物的异步函数来延迟初始化滚动条。这是我用作聚合物准备的一部分的代码。

<script>
Polymer ({
      ...
      ...
      ready:function() {
        this.async(function() {
            this.setScroll();
            }, null, 300);
            },
        setScroll: function() {
            var nodeList = document.querySelectorAll('.wrapper');
            if(nodeList.length == 0) {
                this.async(function() { this.setScroll(); }, null, 300);
            }
            for (var i=0; i<nodeList.length; i++) {
//              this.setScrollDirection ('y', nodeList[i]);
                nodeList[i].id = 'wrapper'+i;
                var myScroll = new IScroll('#'+nodeList[i].id, { eventPassthrough: true, scrollX: true, scrollY: false, preventDefault: false });
//              myScroll.scrollBy(-50, 0, 500);
            }
            }
          })();
</script>

我还能够使用文档中提到的Polymers跟踪手势。

聆听某些手势可控制滚动方向触摸输入。例如，具有track事件侦听器的节点将默认阻止滚动。元素可以覆盖滚动方向与this.setScrollDirection（方向，节点），在哪里 direction是'x'，'y'，'none'或'all'之一，节点默认为此

state - a string indicating the tracking state:
start - fired when tracking is first detected (finger/button down and moved past a pre-set distance threshold)
track - fired while tracking
end - fired when tracking ends
x - clientX coordinate for event
y - clientY coordinate for event
dx - change in pixels horizontally since the first track event
dy - change in pixels vertically since the first track event
ddx - change in pixels horizontally since last track event
ddy - change in pixels vertically since last track event
hover() - a function that may be called to determine the element currently being hovered

我已经使用（dx＆gt; dy）了解它是水平滑动还是垂直滑动，然后根据具体情况启用水平和垂直滑动。这工作但我喜欢弹跳和iScroll提供的其他选项，除了它只有4KB缩小和gzip。所以，我决定选择iScroll。

[注意：使用iScroll不需要jQuery。这是一个独立的剧本]

纸页面板内的垂直滚动表现不当

2 个答案: