Ios не работает scroll

Русские Блоги

-webkit-overflow-scrolling: проблемы с касанием и прокруткой ios

оглавление

1. Что такое -webkit-overflow-scrolling: touch?

Это определено в MDN:

-webkit-overflow-scrolling Атрибут определяет, использует ли элемент эффект отскока прокрутки на мобильном устройстве.
auto : Используйте обычную прокрутку, когда палец убран с сенсорного экрана, прокрутка немедленно остановится.
touch : Используйте эффект прокрутки с отскоком. Когда палец убран с сенсорного экрана, содержимое будет продолжать прокручиваться в течение некоторого времени. Скорость и продолжительность продолжающейся прокрутки пропорциональны интенсивности жеста прокрутки. В то же время создается новый контекст стека.

На мобильном телефоне, когда вы используете overflow-y:scorll В атрибуте вы найдете, что эффект прокрутки очень деревянный и медленный. Вы можете использовать его в это время -webkit-overflow-scrolling:touch Этот атрибут заставляет полосу прокрутки производитьотменаЭффект такой же плавный, как и встроенная полоса прокрутки ios.

2. Пример решения джиттера макета сафари

Я хочу реализовать макет с заголовком, основным и нижним макетом, где голова и нижняя часть фиксируются фиксированными, а средняя часть скользит по полосе прокрутки.

Если цель состоит в том, чтобы достичь того эффекта, что средний контент будет автоматически прокручиваться, пока средний контент превышает высоту экрана, main Часть плюс вверх и вниз padding И тогда вам не нужно добавлять какие-либо свойства полосы прокрутки самостоятельно. Когда высота будет превышена, body Будет автоматически генерировать полосы прокрутки. Таким образом, наша цель фактически достигнута.

Но когдаsafariВверх, когда страница опускается ниже высоты, панель инструментов в нижней части браузераБудет качаться со страницей(При прокрутке вниз нижняя панель инструментов поднимается вверх), что приводит к очень плохому опыту. Итак, мы хотим быть в середине main Часть плюс одинНезависимая полоса прокрутки。

2.1 Вариант первый

Используйте фиксированное позиционирование на главном, плюс атрибут overflow-y.

Однако это фиксированное решение не рекомендуется, поскольку страница иногда застревает и не перемещается. Эта проблема обсуждается ниже.

2.2 Схема 2

среднийосновной не устанавливает бит，Высота 100%,очередной разобивка головы и хвоста，

Положение головы и дна установлено на absolute Будет установлен на fixed Опыт лучше (и у исправления есть различные проблемы на мобильном терминале, поэтому постарайтесь избежать этого :)).

Примерный код выглядит следующим образом, до сих пор overflow-y с участием -webkit-overflow-scrolling , Ключ в том, что средняя часть размещена в соответствии с потоком текста.

3. Изучите -webkit-overflow-scrolling: ошибка, которую касание иногда застревает или не может скользить

-webkit-overflow-scrolling: атрибут touch на самом деле является множеством ям. Я изучал этот атрибут более полугода, и я не нашел пример без ошибок, который можно было бы идеально использовать в сафари.

• На сафари используется -webkit-overflow-scrolling:touch После этого страница иногда застревает.
• В сафари нажмите на другие области, а затем сдвиньте область прокрутки, полоса прокрутки не может прокрутить ошибку.
• Динамическое добавление содержимого для открытия контейнера приводит к ошибке, которая вообще не может скользить.

Я также видел, как некоторые люди задают этот вопрос в Интернете, но не так много. За рубежом обсуждается больше вопросов, как описано ниже.

Иногда застрявшие проблемы, существуют разные мнения по поводу решения в Интернете, и встречаются многие из тех же утверждений. Например, если застрявший не двигается, добавьте один z-index Может решить проблему.

После многих попыток это утверждение никогда не решало проблему. Это утверждение может быть распространено, возможно, что пользователь столкнулся с ним при его использовании -webkit-overflow-scrolling:touch Нажмите через или уровень вопросов. Поэтому программа не применима.

Так что эта вещь действительно беспокоила меня долгое время, так что в течение этого времени все полосы прокрутки либо прокручивались по всему телу, либо использовались библиотеки, такие как iScroll, что заставляло меня почти отказаться от мобильной сети и использовать гибрид. После долгого погружения в stackoverflow были обобщены следующие решения:

3.1 Убедитесь, что на элементе, который использует этот атрибут, не установлено позиционирование.

Если он случайно застревает и не двигается, то на элементе, который использует этот атрибутНет позиционированияИли вручную установите позиционирование как static

Это решитразделОшибка, из-за которой страницу нельзя прокручивать из-за позиционирования (относительное, фиксированное, абсолютное).

Но скольжение вверх и продолжение скольжения пальца вниз или вниз и продолжение скольжения вверх по-прежнему вызовет проблему застревания (фактически вся страница отскакивает вверх и вниз). Говорят, что это ошибка, которая на самом деле является функцией выше ios 8. Если область прокрутки велика Во-первых, пользователь не будет думать, что это ошибка, если она маленькая, пользователь застрянет, не зная, что произошло.
Видео здесь, студенты с лестницами могут посмотретьhttps://www.youtube.com/watch?v=MkAVYbO_joo。

3.2 Если страница с динамическим содержимым не может быть прокручена, пусть дочерний элемент height + 1

Если в -webkit-overflow-scrolling:touch Элемент атрибута, хотите передатьДинамически добавлять контентЧтобы поддержать контейнер и вызвать прокрутку, есть ошибка, и страница застрянет.

Никто дома не обсуждает эту проблему, но есть много за рубежом, такие как следующее описание:

После сбора большого количества информации, после ее использования, следующий метод действительно решил мою проблему. Это действительно удивительно. План таков:

Метод webkit-overflow-scrolling:touch атрибутивныйДочерний элемент следующего уровняНа волерост плюс 1% или 1px, тем самымАктивно активировать полосу прокрутки。

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

Надо сказать, что эта программа очень проста в использовании. ,

Конечно, есть и другие решения, но писать js или jq проблематично.

3.3 Почему существует эта застрявшая ошибка

Эта ошибка генерируется в ios8 и выше (не очень уверен, но вам нужно вручную использовать translateZ (0), чтобы включить аппаратное ускорение на ios5

Safari для overflow-scrolling Используйте родные элементы управления для достижения. Для там -webkit-overflow-scrolling Создам UIScrollView , Предоставить саб layer Используется модулем рендеринга.

Я хочу сказать, что как трудолюбивый клиент, это может быть решено только.

4. -webkit-overflow-scrolling: другие касания

Кроме того, этот атрибут имеет много ошибок, включая, но не ограничиваясь, следующим:

• Свойство scrollTop не изменится во время прокрутки
• Жесты могут вызывать прокрутку элементов через другие элементы
• Приостановить другие переходы при прокрутке

Интеллектуальная рекомендация

Обход последовательности двоичного дерева, обход предварительного порядка (рекурсивный, нерекурсивный), обход среднего порядка (рекурсивный, нерекурсивный), последующий обход (рекурсивный, нерекурсивный)

Справочник статей Обход последовательности двоичного дерева Предзаказ обхода Рекурсивная версия Нерекурсивная версия Упорядоченный обход Рекурсивная версия Нерекурсивная версия Обход после заказа Реку.

iOS- alloc init new

Вы должны создавать объекты каждый день в процессе разработки, но зачем вам нужно alloc init во время инициализации? Что сделали alloc и init? alloc: выделяет память для объекта, позволяет ему не осво.

Python без модуля по имени решение

Иногда запуск программы Python, такие как питон bob.py, клубеньковые ошибки ИМЕНИ «×××», потому что ИМПОРТ ××× произошел. Как решить это? Два случая ана.

1.5.2 Вложенность и область действия функций Python

1. Тернарная операция Результат выполнения условия if else Результат выполнения условия Например: 2. Пространство имен ** Глобальное пространство имен: ** Пространство, созданное для хранения «в.

Источник

Scroll doesn’t work on IOS #102

Comments

carpben commented Apr 10, 2019

For some reason Scroll doesn’t work in modals on IOS. It works well, on other platforms.
To view this issue:

Files in production include source-maps. Specifically visit

I tried locally adding «overflow-y: scroll; -webkit-overflow-scrolling: touch;» but the issue persists.

The text was updated successfully, but these errors were encountered:

kemalcany commented Apr 11, 2019

Hmm I am also having an issue on my iPad. However the demo at https://bodyscrolllock.now.sh works fine on the iPad too. Could there be a different implementation than the default?

carpben commented Apr 12, 2019 •

After testing and playing with the functions for a few hours on various platforms, there is no problem with the library, but how I was using it.

I think the documentation could be improved. Specifically, that the element we would like to allow scroll on, is the same element we should pass to disableBodyScroll (and not a parent of that element) and on which we should apply the following css:

As a more reusable solution I created the following component (Written in Typescript, using an Emotion Styled component):

1. Perhaps we can create a similar component, which is more generic and not dependent on Emotion, and export it as part of the library?
2. The documentation should elaborate on how to use the library. My English is not native, but I can offer a PR.

phelma commented Apr 17, 2019

#104 fixed this for me

jtomaszewski commented Apr 23, 2019

I agree with @carpben that we should put more focus in README onto which node should be passed to disableBodyScroll(targetElement) .

Specifically, that the element we would like to allow scroll on, is the same element we should pass to disableBodyScroll (and not a parent of that element) and on which we should apply the following css:

It would probably save my last 1-2h ;p

knitevision1 commented May 5, 2019

Thank you @carpben I was trying for years to figure out the combination where everything would work as intended.

willmcpo commented May 9, 2019

Readme updated to emphasise target element that you want to persist scrolling for is element you want to allow scroll ON, and not the parent of the element you want to allow scrolling for.

Thanks for the tip. 😃

alxhghs commented May 17, 2019 •

Aside from overflow-y: auto and -webkit-overflow-scrolling: touch , I had to add height: calc(100% + 1px) in order for scroll to work on iOS Safari when content is dynamically rendered. I think a component like this could be useful

jmayergit commented Jul 16, 2019 •

-webkit-overflow-scrolling is non-standard, why are we using it

I am unable to scroll on iOS using any browser

recreated issue with this pen (using react-modal)

alxhghs commented Jul 16, 2019 •

You don’t have to use WebKit-overflow-scrolling if you don’t want. It makes scroll smooth on iOS and is optional. It won’t do anything on other browsers but is widely used for iOS.

Overflow-y: auto and height: 100%+1px fixes two iOS scroll bugs.

I believe this library uses overflow: hidden. iOS doesn’t respect overflow hidden for scroll lock containers but overflow auto does work.

Height: 100% + 1px is a hack to allow scroll lock for dynamic content that goes beyond the height of the view port (again, iOS). This forces iOS to allow for vertical scroll of content that goes beyond the height of the view port.

@jmayergit if you try out this CSS (see my example above) you should be able to get it to work.

Источник

В мобильной версии сайта ломается скролл на iphone

Спросил Joka,
24 января 2016

Вопрос

Мобильная версия сайта скроллится идеально на андроиде http://imgur.com/XeFTTES
Но на айфоне скролл ломается и он нереально быстрый http://imgur.com/5UruYUI

Заметил, что при открытии сайта на айфоне в код добавляется новый

Так же в CSS нашел это:

Но никак не пойму в чем проблема. Помогите, пожалуйста. Как исправить?

Ссылка на комментарий

Поделиться на других сайтах

4 ответа на этот вопрос

Рекомендованные сообщения

Присоединяйтесь к обсуждению

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

Похожие публикации

Ребята, без вас никуда!
Подскажите, пожалуйста, первый раз адаптирую и стилизую слайдер splide.
Сам он работает, но как его стилизовать? В dev tools стилизация тех же стрелок отражается, но когда вношу их в css — не работает. Почему так? Как, например, тогда опустить ниже стрелки? Где устанавливать брейкпоинты и задавать им свойства?

Источник