Решение проблемы проникновения мобильной прокрутки

Vue.js

предисловие

Раньше я работал на системе ПК, а теперь столкнулся с некоторыми проблемами с мобильным терминалом.Эта статья решает проблему.мобильная прокруткапротивный вопрос!

глобальная прокрутка

глобальная прокруткато есть прокрутка включенапрокрутить тело. Нет проблем, если есть только один глобальный скролл, проблема в том, что появляется страница с глобальным скролломВсплывающие окнаСценарий, как показано ниже:

В этом случае всплывающее окно будет иметь следующие проблемы:

Проникновение прокрутки - исправлено всплывающее окно

что ты имеешь в виду, вВсплывающие окнаначальствоНажмите или проведите пальцемкогда,Базовая глобальная прокрутка также будет следовать!!! Когда проблема впервые возникла, я также искал волну в Интернете и пробовал следующие методы:

  1. Установите overflow:hidden в тело, когда всплывает окно; (недостаток: ios бесполезен)
  2. Set position:fixed to body когда всплывает окно; (недостаток: потеряется позиция прокрутки, ios бесполезен)

Идеальное решение для этой ситуации:

добавить во всплывающее окно@touchmove.stop.prevent, блокироватьtouchmoveсобытие доставленоbody, тоже решилпрокатное проникновение.

Проникновение прокрутки - всплывающее окно прокрутки

Еще эта картина, ситуацияТакже есть прокрутка во всплывающем окне! ! ! если используется@touchmove.stop.prevent, что решает проблему проникновения прокрутки, но из-за блокировки了@touchmove, самне могу прокрутитьТеперь, если вы мне не верите, попробуйте сами написать демо~

что для этой ситуацииИдеальное решениеПлан таков: Глобальные настройки прокрутки для тела при открытом всплывающем окнеposition:fixedсвойства иустановить максимальное значение; Поскольку установлен фиксированный атрибут, полоса прокрутки в теле окна при появлении всплывающего окна отсутствует. В это время, если вы установите его таким образом, вы обнаружите, что, хотя тело не имеет проникновения свитка, ноисходное положение потеряно. Поэтому, когда вы устанавливаете фиксированный атрибут для тела, вам нужноТекущая позиция прокрутки назначается верхнему свойству css, что вВизуально изменений нет.

      fixedBody () {
        let scrollTop = document.body.scrollTop || document.documentElement.scrollTop
        document.body.style.cssText += 'position:fixed;width:100%;top:-' + scrollTop + 'px;'
      }

Как с этим бороться, когда всплывающее окно закрывается? Когда всплывающее окно закрывается,Очистить фиксированное фиксированное позиционирование и верхнее значение;иУстановите верхнее значение позиции прокрутки, функция прокрутки восстановлена, а визуальных изменений нет, что на данный момент является самым совершенным решением!

      looseBody () {
        let body = document.body
        body.style.position = ''
        let top = body.style.top
        document.body.scrollTop = document.documentElement.scrollTop = -parseInt(top)
        body.style.top = ''
      }

Суммировать

Вышеуказанные два решения устраняют влияние фиксированных всплывающих окон и всплывающих окон с прокруткой на глобальную прокрутку тела. В конце статьи дляVue создает собственный пакет инструкций.

частичная прокрутка

Частичная прокрутка, или изображение только сейчас, прокрутка во всплывающем окне, прокрутка на Android без проблем, но вЧастичная прокрутка iOSИногда это так.

Действия по воспроизведению:

  • ①Сверху вниз из-за пределов области прокрутки
  • ②В области скользящей прокрутки было обнаружено, что прокрутка не работает! ! ! Блин.... Эта ТМ до сих пор родной атрибут. Повторите это несколько раз, и это будет воспроизводимо.

Решение: Используйте плагиныbetter-scroll, Большой парень проведет собственное исследование документа.

vue-инкапсуляция

вид:

    directives: {
      fixed: {
        // inserted 被绑定元素插入父节点时调用
        inserted () {
          let scrollTop = document.body.scrollTop || document.documentElement.scrollTop
          document.body.style.cssText += 'position:fixed;width:100%;top:-' + scrollTop + 'px;'
        },
        // unbind 指令与元素解绑时调用
        unbind () {
          let body = document.body
          body.style.position = ''
          let top = body.style.top
          document.body.scrollTop = document.documentElement.scrollTop = -parseInt(top)
          body.style.top = ''
        }
      }
    },

Пользовательские директивы используют html:

<div  v-if="isShowRecordModal" v-fixed>
    ....
    ....
</div>

инструкциибудь остороженнеобходимо использоватьv-ifПриходитьОткрыть закрыть всплывающее окно, потому что инструкцияDOM-зависимая вставка и выход из системы,использоватьv-showКонечно нет.

Эпилог

Лучшее время для посадки дерева было десять лет назад, а затем и сейчас.

Ставьте лайк, если поможет~

Категории