Paper-header-panel vertical scroll not functioning properly

Currently, I am in the process of building a webpage. The design involves using polymer's paper-drawer-panel and paper-header-panel together.

The layout consists of two containers - one that needs to scroll horizontally and one that needs to scroll vertically. Initially, everything worked perfectly without any issues. You can view the demo here. On mobile browsers such as Chrome or in the Chrome mobile simulator, I could scroll both ways as expected.

However, when I introduced the paper-header-panel within my custom element <app-layout>, the vertical scrolling behavior changed on touch events from the inner container. While horizontal scrolling remained intact in mobile browsers, the vertical scrolling couldn't be achieved anymore. You can see this difference in the demo here.

Below is the pertinent source code snippet for the app-layout element:

HTML -

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

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

  <template>
  
    // Code content here...

  </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;
}

// Additional CSS styling properties provided below...

Answer №1

Based on our feedback,

In the meantime, while you continue to troubleshoot the issue, consider experimenting with Iscroll 5 for horizontal scrolling of the cards within the App to see if it functions properly.

I have personally utilized Iscroll 5 for my own App, implementing both horizontal and vertical scrolls with hundreds of items without experiencing any performance issues on Polymer. To optimize performance further, I disabled bounce in the Iscroll options using ,bounce: false

If your Cards require Click events, make sure to include ,click:true in the Iscroll options

You can find a guide for Iscroll 5 here

The demo illustrates how Iscroll is created for each row when users scroll horizontally to conserve resources. The original demo featured in my comments was designed for the JQM framework which includes built-in Swipe detection.

While version 0.5 of Polymer offers integrated Touch functionality, I am uncertain about version 1's features as I have not yet utilized it https://www.polymer-project.org/0.5/docs/polymer/touch.html

I have also developed another Demo specifically for Polymer that employs JavaScript Touch events to detect only horizontal movements, eliminating the need for additional Touch gesture plugins in the App

Demonstration: I have set a 5-second delay for the code initialization. A majority of the code pertains to managing touch events. Within the function slide(x) { section, you will find around 10 lines dedicated to Iscroll integration

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

Code

    var slides = 17; //number of items per row
    var totalwidth = slides * 80; //total width calculation based on item width

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

   // touch function 
    var startPos;
        var handlingTouch = false;
        var itemis;
        setTimeout(function() {
        
         // touch event listeners
  
        function slide(x) {

    //implementation details for Iscroll
        
        }

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

    // determining the touched element

          itemis = $(e.target).closest("div");
          
          swipeOrigin = e.touches[0].clientX;
        }
        function onSwipeMove(e) {
          x = e.touches[0].clientX - swipeOrigin;
        }
        function onSwipeEnd(e) {

          //determining direction of swipe and triggering actions accordingly

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

The touch function outlined above was initially used for moving list items via touch gestures, similar to the Gmail App, for both JQM and Polymer list items. It can be applied horizontally in scenarios where Iscroll is not conventionally utilized, essentially activating Iscroll for a row upon horizontal touch movement.

Feel free to explore my alternative use of the function in the provided Link.

jQuery touchSwipe event on element prevents scroll

Answer №2

One of the challenges encountered is that mobile devices disable horizontal scrolling when vertical scrolling is active, and vice versa. To address this issue, I implemented Tasos's suggestion to utilize iScroll. Leveraging polymer's async function, I initialized the scrollers with a slight delay. Below is the snippet of code included in polymer-ready.

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

In addition, I successfully utilized Polymers track gesture functionality as outlined in the documentation.

For touch input, controlling the scrolling direction can be achieved by listening for specific gestures. For instance, nodes with track event listeners will halt scrolling by default. Elements have the ability to override scroll directions using this.setScrollDirection(direction, node), where direction can be 'x', 'y', 'none', or 'all', with node defaulting to this.

state - a string indicating the tracking state:
start - triggered upon initial detection of tracking (finger/button down and moved past a pre-set distance threshold)
track - fired during tracking
end - triggered when tracking stops
x - clientX coordinate for event
y - clientY coordinate for event
dx - horizontal pixel change since the first track event
dy - vertical pixel change since the first track event
ddx - horizontal pixel change since last track event
ddy - vertical pixel change since last track event
hover() - a function to identify the currently hovered element

I utilized (dx > dy) to determine whether it was a horizontal or vertical swipe, adjusting the swiping direction accordingly. While this method worked, I found the features provided by iScroll—including bounce effects—to be more appealing. Given its compact size of just 4KB when minified and gzipped, I opted to implement iScroll.

[Note: jQuery dependency is not required for iScroll usage as it functions independently]

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Blur transition on CSS-defined borders

Looking to create a large button with a blurred background image that unblurs on hover. I've implemented a container with overflow hidden and adjusted the margin on the background image for defined edges. However, during the transition from blurred t ...

Transform the snake code by incorporating a visual image as the face of the serpent

Can someone help me change the snake's face to an image instead of a color fill in this code? And how can I add arrows for mobile compatibility? (function() { // Insert JS code here })(); // Insert CSS code here This code snippet includes functi ...

Is there a way to soften the repetitive elements in the background image?

Is there a method to blur the part of a background image that is repeated, such that if it is positioned in the center, the sides of the image appear blurry as well? ...

How to Use CSS to Copy a Style Path and Conceal an Element within an iFrame

My goal is to adjust a division by including a width element in its CSS properties. I have attempted to use Chrome and Firebug to copy the CSS path, but it seems that the result is incorrect. After inserting it into my style.css file, the division remains ...

Unable to implement styles or classes in Vue.js when utilizing it in a loop

My code has a feature where item.fav starts as false, but changes to true when a button is clicked. I want the color of the icon to turn purple when item.fav is true, but it's not working as expected. <template> <v-container fluid> ...

Change the color of specific elements in an SVG using React

Can I change the dynamic primary color from ReactJS to a specific class in an SVG file? If yes, how can it be done? Error.svg <!-- Generator: Adobe Illustrator 26.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <svg version="1.1&qu ...

Tips for organizing labels and user input within an HTML document

I attempted to align inputs and labels horizontally. Here is what I tried: <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="row"> <div class="span2"> <h2& ...

Issue with vertical alignment of subscripts and superscripts

I am working with two buttons that manipulate the verticalAlign property. One button is supposed to set it to sub and the other is supposed to set it to sub. However, both buttons end up setting it to sub. Here is the code for both actions: Superscript d ...

Include a border around the list items within two separate columns

I am trying to create 2 columns using li and want to add borders to each of them. However, I'm facing an issue where there are double borders for 2 li. This is the code snippet I have tried: .ul1 { column-count: 2; column-gap: 0px; } .li1 ...

Setting a Minimum Height in Bootstrap for a Div

I am currently working on designing a page with a banner using bootstrap. The image, which has the id "mybanner," is generated dynamically from the code. This means that there are occasions where the image element may not exist within my code. To ensure co ...

Columns with adjustable widths

I am looking to create a layout with 3 columns (which may change, could be up to 4) that are all flexible width and fill the screen. Does anyone know if this is possible using CSS? Basically, I want three blocks lined up horizontally that take up the enti ...

Display issue with ul and li elements in Safari browser causing menu to appear incorrectly

Although I am new to CSS, I managed to create a menu on my website that hovers over the background video successfully. It is a basic menu using a ul with li elements and it appears as intended in all browsers except Safari. In Safari, the menu items stack ...

Capturing the action phase in Liferay to change the cursor to 'waiting' mode

I'm currently working on a large Liferay project and have encountered a specific issue: Whenever something in the system is loading or processing, I need to change the cursor to a waiting GIF. While this is simple when using Ajax, there are many inst ...

What is the process for applying CSS styles to a particular component?

What is the recommended way to apply CSS styles to a specific component? For instance, in my App.js file, I have added Login and Register components for routing purposes. In Login.css, I have defined some CSS styles and then imported it into Login.js. T ...

Preventing Flash of Unstyled Content in ElectronJS Browser Windows

Upon creating a new BrowserWindow and utilizing loadURL to incorporate an html file within the renderer, there is a brief instance where unstyled content is displayed for approximately half a second before the css is loaded. window.loadURL('file://&a ...

Ways to display an icon with an underline effect upon hovering over text

I have implemented a CSS effect where hovering over text creates an underline that expands and contracts in size. However, I now want to display an icon alongside the text that appears and disappears along with the underline effect. When I try using displa ...

What could be causing Safari to alter the heights of my div element?

After completing a challenge for FrontEnd Mentor, I excitedly texted a friend my demo link to showcase my work. However, upon opening the link on my phone, I discovered that the formatting was all over the place. Switching to Safari on my desktop only made ...

Apply a static style to every rendered component just one time

Is there a way for me to individually style each card image only once? For example, I want to apply a transform style via a function in CSS; I want the image to maintain its original value, but when a new component is rendered, that card should have a di ...

Activating development mode for LessCSS in Node.js

I'm encountering some major difficulties identifying LESS parse errors within a large CSS compilation. The error messages aren't providing much help (at least not for me). Here are my questions: 1. Is there a method to activate more debugging ...

Arranging Bootstrap Carousel cards in a top-down position

When using Bootstrap Cards in a horizontal carousel, each card's height is dynamically adjusted based on the length of the copy. However, there is an issue where the cards appear positioned at the bottom of the carousel instead of aligning to the top ...