垂直滚动不适用于移动设备 - 触摸答案

【问题标题】：Vertical Scrolling Not Working for Mobile - Touch垂直滚动不适用于移动设备 - 触摸
【发布时间】：2019-02-23 22:38:27
【问题描述】：

我在获取 div 以允许移动设备进行触摸和垂直滚动时遇到问题。如果滚动鼠标滚轮或使用箭头键，滚动效果很好。就是不碰。这已经在所有设备和仿真中进行了测试。看在上帝的份上，请帮助我，哈哈，已经 3 天没有运气了。而且我过去也这样做过，没有任何问题，我想我已经完全白痴了，哈哈哈。

下面是可滚动区域的图像，黄色/黑色的彩色边框可帮助您确定发生了什么。这适用于平板电脑和更小的平板电脑。

https://cdn.discordapp.com/attachments/103696749012467712/491964310436970499/1.PNG

export const CategoriesBox = styled.div`
  margin-top: 6px;
  position: relative;
  width: 100%;
  height: 310px;
  overflow-y: scroll;

  @media only screen and (max-width: ${breakpoints.tablet}) {
    border: 1px solid yellow;
    height: 310px;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
  }

  & input[type="checkbox"] {
    display: none;
    pointer-events: none;
  }

  & label {
    margin: 0;
    padding-left: 21px;
  }
`;

export const ScrollableBox = styled.div`
  position: relative;
  height: 100%;
  width: 100%;
  border: 1px solid black;
`;

我删除了 webkit 的东西并尝试了一些朋友向我展示的一些东西。下面是新样式的组件代码。参考图像仍然相同。同样，我可以使用滚轮或上/下箭头很好地滚动它。

export const CategoriesBox = styled.div`
  margin-top: 6px;
  position: relative;
  width: 100%;
  height: 310px;
  overflow-y: scroll;

  @media only screen and (max-width: ${breakpoints.tablet}) {
    border: 1px solid yellow;
    height: 310px;
    z-index: 1;
    overflow-y: scroll;
  }

  & input[type="checkbox"] {
    display: none;
    pointer-events: none;
  }

  & label {
    margin: 0;
    padding-left: 21px;
  }
`;

export const ScrollableBox = styled.div`
  position: relative;
  width: 100%;
  height: fit-content;
  border: 1.5px solid red;
`;

【问题讨论】：

你为什么有-webkit-overflow-scrolling？
我在线阅读我需要它来支持 IOS 或某些浏览器，以便在拖动滚动时给它一个有弹性的效果，而不是在它到达 div 的 en 时完全停止。尽管我猜不是因为样式化组件为我处理了所有前缀，但对吗？我还为上述问题添加了一些新代码。
尝试完全删除所有 CSS。你的内容会滚动吗？如果是这样，那么将您的 CSS 重新添加到块中，您将能够查明麻烦的行
我可以试一试，看看会发生什么。太奇怪了，但这不起作用。在 css 中实现是一件非常简单的事情。
是的，但 CSS 并不是唯一影响滚动行为的东西——JS 也可以干预滚动。

标签： javascript css reactjs sass styled-components

【解决方案1】：

我意识到我有一个阻止它正常工作的组件上的滚动锁。好傻哈哈。

【讨论】：