Question

我在获取div以允许移动设备进行触摸和垂直滚动时遇到问题。如果您滚动鼠标滚轮或使用箭头键，则滚动效果很好。只是不碰。这已经在所有设备上进行了测试，并在仿真中进行了测试。请上帝保佑我，大笑了三天。而且我过去做的没问题，我想我已经完全白痴了，哈哈哈。

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

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

Answer 1

我意识到我在某个组件上具有滚动锁定，这阻止了它正常工作。太蠢了哈哈。

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

1 个答案: