Nano Hash - криптовалюты, майнинг, программирование

Как предотвратить событие прокрутки в нижней части экрана в iOS Safari

При использовании сафари iOS происходит событие прокрутки с неизвестным источником.

Чтобы воспроизвести проблему. Вы можете использовать эту ссылку, чтобы изучить минимальный пример проблемы.

https://codesandbox.io/s/frosty-pike-7z6v9?file=/src/styles.css&resolutionWidth=444&resolutionHeight=649.

Используя iphone, попробуйте прокрутить, пока не избавитесь от нижней панели навигации Safari, а затем прокрутите не прокручиваемую красную область в самом нижнем крае экрана.

  • Что вызывает такое поведение (название события)?
  • Можно ли предотвратить прокрутку с помощью этого метода с помощью Javascript без дополнительных css?

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

введите описание изображения здесь

javascript scroll mobile-safari
16.04.2021

Ответы:


1

Можно ли предотвратить прокрутку с помощью этого метода с помощью Javascript без дополнительных css?

Боюсь, что ответ будет отрицательным. :(

Вот наиболее значимый источник, который я смог найти: https://bugs.webkit.org/show_bug.cgi?id=189586 (~ 2,5 года назад)

В этом источнике см. Раздел Уровень 6: Ограниченная область браузера iOS Safari: https://medium.com/turo-engineering/ios-mobile-scroll-in-web-react-1d92d910604b

Другой: https://benfrain.com/the-ios-safari-menu-bar-is-hostile-to-web-apps-discuss/

Ссылки, сделанные в выпусках из библиотеки body-scroll-lock:

24.04.2021
  • спасибо за Ваш ответ. Хотя у меня нет решения этой ошибки, ссылка на статью в среднем дала мне действительно хорошее представление о том, что происходит. Я обновлю вопрос, если найду решение или что-нибудь появится. 26.04.2021

    • 2

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

    В вашем css установите ширину тела:

    body {
  font-family: sans-serif;
  width:100vw;
}

    Затем в вашем javascript добавьте position:fixed на touchstart, удалите его на touchend, например:

    document
.getElementById("noScrollArea")
.addEventListener("touchstart", (e) => {
    e.preventDefault()

    var height = document.body.clientHeight;
    document.body.style.height = height + 'px';
    document.body.style.position = 'fixed';
});
document
.getElementById("noScrollArea")
.addEventListener("touchend", (e) => {
    e.preventDefault();
    document.body.style.height = 'initial';
    document.body.style.position = 'initial';
});

    Надеюсь, это поможет вам в правильном направлении ...

    19.04.2021
  • К сожалению, я не могу принять ваше решение. 1. Это не работает, сафари не дает вам возможности обнаруживать эти события в одной и той же области. 2. Я не хочу добавлять какие-либо дополнительные css вне компонента, в этом вся суть моего вопроса, это создаст компонент с побочным эффектом, очень плохо иметь что-то подобное. 20.04.2021
  • Что вы имеете в виду под «сафари» не дает вам возможности обнаруживать эти события в одной и той же области? Вот рабочая демонстрация: klaasmaakt.nl/test. Насколько я знаю, ваша проблема с эффектом перепрокрутки может быть решена только путем добавления fixed в тело, так что это единственный вариант, если вы спросите меня ... 20.04.2021
  • Эй, пожалуйста, проверьте ответ @mcy 26.04.2021
    • Новые материалы
    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..