Бьюсь с этой штукой уже несколько недель. Я просто не могу этого понять.
Пытаюсь предотвратить горизонтальную прокрутку тела при открытом меню. Вот полный jsbin:
http://jsbin.com/vopeq/38/edit
Похоже, что любое решение отменяет только другие вещи, которые работают так, как я бы хотел. Поэтому я добавил требования к jsbin, чтобы отслеживать, какие версии удовлетворены.
ОБНОВИТЬ
Может быть, это слишком хорошо, чтобы быть правдой, но я думаю, что все требования удовлетворены, но мне все еще нужно проверить на устройствах Android:
Я узнал, что меня так долго сбивало с толку, и я этого не осознавал, это то, что overflow: hidden в элементе <body> в Mobile Safari не выполняет приседания! Мне пришлось переместить свои стили, чтобы предотвратить прокрутку элементов вниз на один уровень.
И Ed4 указал мне правильное направление. Мне нужно было установить overflow: hidden в родительском элементе, который я перемещаю с помощью left: 85%, вместо самого элемента (я пытался сделать все это на <body>).
Итак, у меня есть body > .container, на котором я выполняю overflow: hidden и body > .container > .content, которые я нажимаю, используя position: relative и left: 85%.
1 ответ
Ваш вопрос больше относится к спецификации дизайна, чем к вопросу, поэтому вместо того, чтобы пытаться спроектировать для вас весь макет, я укажу, почему ваш jsbin не работает.
Не пытайтесь установить left на body. Если body выступает за пределы экрана, вы не сможете надежно остановить прокрутку.
Вместо этого оставьте body неподвижным со 100% шириной и высотой, чтобы он мог служить вашей видимой границей окна. Если вы хотите заблокировать прокрутку, вы можете установить overflow: hidden на body. Управляйте скользящим и прокручиваемым меню с помощью отдельных div внутри body.
Похожие вопросы
Новые вопросы
javascript
По вопросам программирования на ECMAScript (JavaScript/JS) и его различных диалектах/реализациях (кроме ActionScript). Имейте в виду, что JavaScript — это НЕ то же самое, что Java! Включите все ярлыки, относящиеся к вашему вопросу; например, [node.js], [jQuery], [JSON], [ReactJS], [angular], [ember.js], [vue.js], [typescript], [svelte] и т. д.
overflow: hiddenнаbodyне работает должным образом в Mobile Safari (jsbin ). Но он правильно работает с div ( jsbin).