Вертикальная прокрутка не работает для мобильных устройств - сенсорный - PullRequest
Новая
       9

Вертикальная прокрутка не работает для мобильных устройств - сенсорный

0 голосов
/ 19 сентября 2018

У меня проблема с получением 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;
`;

1 Ответ

0 голосов
/ 20 сентября 2018

Я понял, что у меня была блокировка прокрутки на компоненте, которая мешала его правильной работе.Ооо глупо хаха.

...