css - Vertical scroll inside paper-header-panel behaving inappropriately -
i working on page. have used polymer's paper-drawer-panel , paper-header-panel combination.
basically there 2 containers, inner container needs scrolled horizontally while outer container needs scrolled vertically. when have not used paper-header-panel, behavior appropriate. can see demo here. if open site on mobile browser (chrome or others/haven't checked safari) or on mobile simulator in chrome, can scroll both horizontally vertically. behavior have expected.
but, when add in paper-header-panel (part of custom element <app-layout>), able scroll horizontally (in mobile browser) when touch element present in horizontally scrollable div , try scroll vertically in previous case, vertical scroll doesn't work anymore. demo present here.
the relevant source code app-layout element below.
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; }
from our comments,
as alternative solution until find problem can test using iscroll 5 horizontal scroll of cards , see if works ok within app.
ive used iscroll 5 app using both horizontal , vertical scrolls 100's of items , fast on polymer. haven't had performance issues far although turned off bounce in iscroll options eg ,bounce: false performance boost
if have click events cards add ,click:true iscroll options
iscroll 5 guide here http://iscrolljs.com/
the demo creates iscroll row when user scrolls horizontally there save resources , original demo in comments jqm framework has built in swipe detection.
in polymer version 0.5 has built in touch functionality not sure version 1 yet never used yet https://www.polymer-project.org/0.5/docs/polymer/touch.html
for polymer created demo uses javascript touch events detect horizontal movements wont need other touch gesture pluggings add app
demo set 5sec delay code initialize. pretty code handling touch. in function slide(x) { iscroll code 10 lines
http://codepen.io/anon/pen/pjrmlo
code
var slides = 17; //how many items in row var totalwidth = slides * 80; //times width of each item in row $(".scroller").css("width", totalwidth+"px"); //set total width of horizontal wrapper // touch function var startpos; var handlingtouch = false; var itemis; settimeout(function() { document.addeventlistener('touchstart', function(e) { // 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 first movement event in sequence: if (startpos) { // 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 auto scroll uppon activating scroll eg -50px $(itemis).attr("data-id","running") } } var swipeorigin, x, itempos; function onswipestart(e) { // find element been touched. in case may closest("swelement") need test itemis = $(e.target).closest("div"); // when touching on element target, in case closest div of 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 right) greater +35 pixels slide element +100 pixels. if (x > 35) { slide(0); } else { slide(0); } } }, 5000); the above touch function used transforming/moving list items touch drag gmail app, jqm , polymer list items. can used horizontally in case of iscroll not used in way says if touch move horizontally on row activate iscroll row
check demo in link alternative use of function.
Comments
Post a Comment