Horizontal Scrolling on Tablet stops scrolling too soon (width too short)

tristanvann commented 2 years ago

When attempting to create a horizontal scroll, it works on desktop, but not mobile. On mobile/tablet, the width is being truncated somehow. I've created a barebones test page here: https://www.edge-group.com/new/test/index.html where you can see this. The page's code is below:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>LocomotiveScroll Horizontal Test</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/locomotive-scroll@4.1.3/dist/locomotive-scroll.css"> 
    <script src="https://cdn.jsdelivr.net/npm/locomotive-scroll@4.1.3/dist/locomotive-scroll.min.js"></script>
    <style>
      html,
      body,
      div {
        height: 100%;
        padding: 0;
        margin: 0;
        line-height: 0;
      }
    </style>
  </head>   
  <body>
    <div data-scroll-container>
      <div style="background: red; width: 3000px; display: inline-block"></div><div style="background: blue; width: 300px; display: inline-block"></div>
    </div>
    <script>
      const scroller = new LocomotiveScroll({
        el: document.querySelector("[data-scroll-container]"),
        smooth: true,
        direction: "horizontal",
        tablet: {
          direction: "horizontal",
          gestureDirection: "horizontal",
          smooth: true
        }
      });
    </script>
  </body>
</html>

On desktop, this works perfectly, you can scroll horizontally and see the blue section after the red section. On a tablet, it stops scrolling before it reaches the blue section. It's the same on my phone when I view the page.

MarcDBoss commented 1 year ago

@tristanvann Currently experiencing this exact issue & attempting to find a fix or work-around. Have you managed to find a solution yet?

tristanvann commented 1 year ago

Didn't find a fix, we just restructured the page. Sorry

locomotivemtl / locomotive-scroll

Horizontal Scrolling on Tablet stops scrolling too soon (width too short) #424