Pan, Can't scroll down, it's stuck #1291

cubarabara · 2023-09-22T12:52:37Z

I have a problem, when zoomed in it can't be scrolled down

On mobile

Video.mp4

<html>

<head>
   <title>Document</title>
   <script src='https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.js'></script>
   <style type="text/css" media="all">
      * {
         margin: 0;
         padding: 0;
      }
      
      .container {
         display: flex;
         width: 100%;
         height: 100%;
         align-items: center;
         justify-content: center;
         background: pink;
         position: absolute;
         overflow: hidden;
      }
      
      .wrapper {
         display: flex;
         position: absolute;
         width: 100%;
         height: 100%;
         background: blue;
         cursor: move;
         touch-action: none;
      }
      
      .test {
         width: 300px;
         height: 300px;
         background: red;
         position: absolute;
      }
      
   </style>
</head>

<body>
   <div class="container">
      <div class="wrapper">
         <div class="test">
            p
         </div>
      </div>
   </div>
   
   <script>
      var zoomPanDiv = document.querySelector(".wrapper");
      var hammer = new Hammer(zoomPanDiv);
      
      var scale = 1;
      var lastScale = 1;
      var posX = 0;
      var posY = 0;
      var lastPosX = 0;
      var lastPosY = 0;
   
      hammer.get('pinch').set({ enable: true });
      hammer.get('pan').set({ direction: Hammer.DIRECTION_ALL });

      hammer.on('pinch', (e) => {
         scale = Math.max(1, Math.min(lastScale * e.scale, 3));
         zoomPanDiv.style.transform = `scale(${scale}) translateX(${posX}px) translateY(${posY}px)`;
      });
   
      hammer.on('pinchend', function () {
         lastScale = scale;
      });
   
      hammer.on('pan', (e) => {
         posX = Math.max(-zoomPanDiv.clientWidth * (scale - 1), Math.min(0, lastPosX + e.deltaX));
         posY = Math.max(-zoomPanDiv.clientHeight * (scale - 1), Math.min(0, lastPosY + e.deltaY));
   
         zoomPanDiv.style.transform = `scale(${scale}) translateX(${posX}px) translateY(${posY}px)`;
         console.log(e)
      });
   
      hammer.on('panend', (e) => {
         lastPosX = posX;
         lastPosY = posY;
      });
   </script>
</body>

</html>

ovanderzee · 2024-04-03T10:53:25Z

Happens in combination with swipe too, when trying to start the scroll on the target element. Outside the target element everything works.

cubarabara changed the title ~~Pan, Can't scroll down~~ Pan, Can't scroll down, it's stuck Sep 22, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Pan, Can't scroll down, it's stuck #1291

Pan, Can't scroll down, it's stuck #1291

cubarabara commented Sep 22, 2023 •

edited

Loading

ovanderzee commented Apr 3, 2024 •

edited

Loading

Pan, Can't scroll down, it's stuck #1291

Pan, Can't scroll down, it's stuck #1291

Comments

cubarabara commented Sep 22, 2023 • edited Loading

ovanderzee commented Apr 3, 2024 • edited Loading

cubarabara commented Sep 22, 2023 •

edited

Loading

ovanderzee commented Apr 3, 2024 •

edited

Loading