Я искал решение типа "лайтбокс", которое позволяет это, но еще не нашел его (пожалуйста, предложите, если вы знаете что-либо).
Поведение, которое я пытаюсь воссоздать, похоже на то, что вы увидите в Pinterest при нажатии на изображение. Оверлей можно прокручивать (так как в целом оверлей перемещается вверх, как страница вверху страницы ), но тело позади наложения фиксировано.
Я попытался создать это только с помощью CSS ( то есть div
наложения поверх всей страницы и телаoverflow: hidden
), но это не мешает div
прокручиваться.
Как предотвратить прокрутку тела / страницы, но прокрутить содержимое внутри полноэкранного контейнера?
Ответы:
теория
Если посмотреть на текущую реализацию сайта-интереса (она может измениться в будущем), когда вы открываете оверлей,
noscroll
кbody
элементу применяется классoverflow: hidden
, иbody
он больше не прокручивается.Наложение (созданный на лету или уже внутри страницы и сделать видимыми с помощью
display: block
, это не имеет никакого значения) имеетposition : fixed
иoverflow-y: scroll
, сtop
,left
,right
иbottom
свойства установлено значение0
: этот стиль делает Overlay заполнить всю область просмотра.div
Внутри наложения вместо этого просто вposition: static
то вертикальная полоса прокрутки вы видите, связанный с этим элементом. В результате содержимое прокручивается, но наложение остается фиксированным.Когда вы закрываете масштаб, вы скрываете оверлей (через
display: none
), а затем вы также можете полностью удалить его через javascript (или только содержимое внутри, это зависит от вас, как его вставить).В качестве последнего шага вы также должны удалить
noscroll
класс вbody
(поэтому свойство переполнения возвращается к своему начальному значению)Код
(он работает, изменяя
aria-hidden
атрибут оверлея, чтобы показать и скрыть его и увеличить его доступность).Разметка
(кнопка открытия)
(наложение и кнопка закрытия)
CSS
Javascript (ваниль-JS)
И наконец, вот еще один пример, в котором наложение открывается с эффектом постепенного изменения CSS
transition
с помощьюopacity
свойства. Такжеpadding-right
применяется a, чтобы избежать перекомпоновки основного текста, когда полоса прокрутки исчезает.CSS
источник
div
должен иметь стиль CSSposition:fixed
и иметь возможность вертикальной прокрутки. Я успешно использовалoverflow-y:auto;
и для iOS прокрутки импульса / инерции, я добавил-webkit-overflow-scrolling:touch;
в CSS. Я использовалdisplay:block;
,width:100%;
иheight:100%;
CSS , чтобы иметь полную страницу просмотра.Если вы хотите предотвратить чрезмерную прокрутку на ios, вы можете добавить фиксированную позицию в ваш класс .noscroll
источник
position:fixed
заключается в том, что он изменял размеры моего основного тела. Возможно, это противоречило другим CSS, ноoverflow:hidden
это все, что было нужноНе используйте
overflow: hidden;
наbody
. Он автоматически прокручивает все наверх. Там нет необходимости для JavaScript либо. Использоватьoverflow: auto;
. Это решение даже работает с мобильным Safari:Структура HTML
стайлинг
Смотрите демо здесь и исходный код здесь .
Обновить:
Для людей, которым нужна клавиша пробела на клавиатуре, страница вверх / вниз работает: вам нужно сосредоточиться на оверлее, например, щелкнув по нему, или вручную JS, сфокусировавшись на нем, прежде чем эта часть
div
будет реагировать на клавиатуру. То же самое, когда оверлей «выключен», так как он просто перемещает оверлей в сторону. В противном случае для браузера это всего лишь два нормальных параметра,div
и он не знает, почему он должен фокусироваться на каком-либо из них.источник
html, body { height: 100%; }
(как в демоверсии), чтобы это работало правильно..offset()
значения для расчета,overscroll-behavior
Свойство css позволяет переопределить поведение прокрутки переполнения браузера по умолчанию при достижении верха / низа контента.Просто добавьте следующие стили для наложения:
В настоящее время работает в Chrome, Firefox и IE ( caniuse ).
Для более подробной информации обратитесь к статье разработчиков Google .
источник
overflow-y: scroll
согласился с комбинацией этого с (из вашей демонстрации Codepen). Вопрос, поднятый @pokrishka, действителен, но в моем случае это не проблема. В любом случае, мне интересно, будут ли реализации браузеров освещать эту деталь в будущем. Я обнаружил, что в Firefox изменил размер браузера, чтобы модал не умещался на экране, а затем снова изменил его размер, чтобы это свойство работало (т. Е. Содержалась прокрутка) даже после изменения размера до полного размера - до тех пор, пока страница не будет перезагружена. , по крайней мере.Большинство решений имеют проблему, заключающуюся в том, что они не сохраняют позицию прокрутки, поэтому я посмотрел, как это делает Facebook. В дополнение к настройке нижележащего содержимого
position: fixed
они также динамически устанавливают верхнюю часть, чтобы сохранить положение прокрутки:Затем, когда вы снова удалите оверлей, вам нужно сбросить положение прокрутки:
Я создал небольшой пример, чтобы продемонстрировать это решение
источник
Стоит отметить, что иногда добавление «overflow: hidden» к тегу body не помогает. В этих случаях вам также необходимо добавить свойство в тег html.
источник
width: 100%; height: 100%;
Вообще говоря, если вы хотите, чтобы родитель (тело в данном случае) не давал ему прокручиваться при прокрутке дочернего элемента (в данном случае оверлея), то сделайте дочернего элемента родителем, чтобы предотвратить появление пузыря у события прокрутки до родитель. В случае если родитель является телом, для этого требуется дополнительный элемент обертки:
См. Прокрутка определенного содержимого DIV с помощью главной полосы прокрутки браузера, чтобы увидеть его работу.
источник
Выбранный ответ правильный, но имеет некоторые ограничения:
<body>
на заднем плане<input>
в модальном меню, все будущие прокрутки будут направлены на<body>
У меня нет решения для первой проблемы, но я хотел пролить свет на второй вопрос. Смущает, что Bootstrap раньше документировал проблему с клавиатурой, но они утверждали, что она была исправлена, ссылаясь на http://output.jsbin.com/cacido/quiet в качестве примера исправления.
Действительно, этот пример отлично работает на iOS с моими тестами. Тем не менее, обновление до последней Bootstrap (v4) ломает его.
В попытке выяснить, в чем разница между ними, я сократил контрольный пример, чтобы он больше не зависел от Bootstrap, http://codepen.io/WestonThayer/pen/bgZxBG .
Решающие факторы странные. Чтобы избежать проблемы с клавиатурой, требуется, чтобы
background-color
она не была установлена в корне,<div>
содержащем модал, а содержимое модала должно быть вложено в другой<div>
, который может иметьbackground-color
установлен.Чтобы проверить это, раскомментируйте следующую строку в примере Codepen:
источник
Для сенсорных устройств попробуйте добавить
101vh
прозрачный div минимальной высоты шириной 1px в оболочку наложения. Затем добавьте-webkit-overflow-scrolling:touch; overflow-y: auto;
в обертку. Это обманывает мобильное сафари, заставляя думать, что оверлей можно прокручивать, перехватывая событие касания от тела.Вот пример страницы. Открыть на мобильном сафари: http://www.originalfunction.com/overlay.html
https://gist.github.com/YarGnawh/90e0647f21b5fa78d2f678909673507f
источник
-webkit-overflow-scrolling:touch;
для каждого прокручиваемого контейнера перехват сенсорных событий.Поведение, которое вы хотите предотвратить, называется цепочкой прокрутки. Чтобы отключить его, установите
на вашем оверлее в CSS.
источник
Я обнаружил, что этот вопрос пытается решить проблему с моей страницей на Ipad и Iphone - тело прокручивалось, когда я отображал фиксированный div в виде всплывающего окна с изображением.
Некоторые ответы хорошие, но ни один из них не решил мою проблему. Я нашел следующее сообщение в блоге Кристоффера Петтерссона. Представленное там решение помогло решить проблему с iOS-устройствами и помогло решить проблему с прокруткой.
Шесть вещей, которые я узнал о прокрутке резиновой ленты в iOS Safari
Как было предложено, я включаю основные пункты в блоге на случай, если ссылка устарела.
«Чтобы отключить возможность прокрутки фоновой страницы, когда« открыто меню », можно контролировать, какие элементы следует прокручивать или нет, применяя некоторые JavaScript и класс CSS.
На основе этого ответа Stackoverflow вы можете контролировать, что элементы с отключенной прокруткой не должны выполнять свое действие прокрутки по умолчанию при срабатывании события touchmove. "
А затем поместите класс disable-scrolling на страницу div:
источник
Вы можете легко сделать это с некоторыми "новыми" CSS и JQuery.
Первоначально:
body {... overflow:auto;}
с JQuery вы можете динамически переключаться между «наложением» и «телом». Когда на «тело», используйтеКогда на наложении использовать
JQuery для коммутатора ('body' -> 'overlay'):
JQuery для коммутатора ('overlay' -> 'body'):
источник
Я хотел бы добавить к предыдущим ответам, потому что я пытался сделать это, и некоторая раскладка сломалась, как только я переключил тело в положение: исправлено. Чтобы избежать этого, мне также пришлось установить рост тела на 100%:
источник
Используйте следующий HTML:
Затем JavaScript для перехвата и остановки прокрутки:
Затем, чтобы вернуть вещи в нормальное русло:
$(".page").off("touchmove");
источник
Если целью является отключение на мобильных / сенсорных устройствах, то самый простой способ сделать это - использовать
touch-action: none;
.Пример:
(Пример не работает в контексте переполнения стека. Вам нужно будет воссоздать его на отдельной странице.)
Если вы хотите отключить прокрутку
#app
контейнера, просто добавьтеtouch-action: none;
.источник
попробуй это
источник
Если вы хотите остановить прокрутку body / html, добавьте следующее
CSS
HTML
В принципе, вы могли бы сделать это без JS.
Основная идея заключается в добавлении html / body с высотой: 100% и переполнением: авто. и внутри вашего оверлея вы можете включить или отключить прокрутку в зависимости от ваших требований.
Надеюсь это поможет!
источник
В моем случае ни одно из этих решений не работало на iPhone (iOS 11.0).
Единственное эффективное исправление, которое работает на всех моих устройствах - это ios-10-safari-предотвращать прокрутку за фиксированным наложением и поддерживать прокрутку
источник
Используйте код ниже для отключения и включения полосы прокрутки.
источник