Как убрать глобальный скролл
slfly Участник Группа: Members Зарегистрирован: 14-03-2008 Сообщений: 59 UA: 14.0
Убрать горизонтальную прокрутку для всех сайтов
В многочисленных темах на форуме обсуждалось как убрать горизонтальный скроллбар:
добавление body в userContent.css
Тем не менее, это не устраняет необходимость горизонтальной прокрутки сайтов. Единственная идентичная тема, найденная в поиске была закрыта.
Проблема:
Firefox пошел по стопам удобства Opera и старается подстроить размер текста под ширину экрана при увеличении. Тем не менее, некоторые криворукие верстальщики жестко задают размеры элементов, которые должны быть «резиновыми» и при увеличении текст все равно разъезжается, заставляя волей-неволей пользоваться горизонтальным скроллом при увеличении масштаба.
Работающим решением может являться переопределение min-width css-cтиля страниц расширением типа Styler. Только для каждого сайта писать подобное было бы проблематично.
Решение, которое ищу:
Хочу задать глобальный запрет на минимальный размер через userChrome/userContent, например min-width=100%, чтобы все сайты стали «резиновыми». Тем не менее, у меня этого так и не получилось сделать никакими предлагаемыми решениями. С чем, собственно и прошу помочь.
Отредактировано slfly (13-08-2012 17:53:25)
overscroll-behavior
CSS-свойство overscroll-behavior — это сокращение для свойств overscroll-behavior-x (en-US) и overscroll-behavior-y (en-US), которые позволяют управлять поведением прокрутки при достижении границы области прокрутки.
/* Значения-ключевые слова */ overscroll-behavior: auto; /* по умолчанию */ overscroll-behavior: contain; overscroll-behavior: none; /* Двойное значение */ overscroll-behavior: auto contain; /* Глобальные значения */ overflow: inherit; overflow: initial; overflow: unset;
По умолчанию мобильные браузеры, как правило, обеспечивают эффект «отскока» или даже обновляют страницу при достижении её верхней или нижней части (или другой области прокрутки). Возможно, вы также замечали, что когда поверх страницы с прокруткой расположено диалоговое окно с прокруткой, то при достижении границы прокрутки диалогового окна нижележащая страница начинает прокручиваться. Это называется цепочкой прокрутки (scroll chaining, англ.)
В некоторых случаях такое поведение нежелательно. Вы можете использовать overscroll-behavior , чтобы избавиться от нежелательных цепочек прокрутки и поведения страниц браузера по принципу «потяните, чтобы обновить» (pull to refresh, англ.), характерного, например, для приложений Facebook и Twitter.
Синтаксис
Свойство overscroll-behavior задаётся в виде одного или двух ключевых слов, выбранных из списка значений ниже.
Два ключевых слова определяют значение overscroll-behavior по осям x и y соответственно. Если задано только одно значение, то предполагается, что и x , и y одинаковы.
Значения
Поведение по умолчанию.
Поведение для overscroll-behavior применяется внутри элемента, для которого установлено это значение (например, эффекты «отскока» или обновления), но не возникают цепочки прокрутки для соседних областей прокрутки, например, нижележащие элементы не будут прокручиваться.
Не происходит цепочки прокрутки в соседних областях прокрутки, и по умолчанию предотвращается достижение границы области прокрутки.
Формальный синтаксис
overscroll-behavior =
[ (en-US) contain | (en-US) none | (en-US) auto ] (en-US) (en-US)
Примеры
В нашем примере overscroll-поведения (см. также код по ссылке ) представлен полностраничный список поддельных контактов и диалоговое окно с чатом.
Обе эти области прокручиваются; обычно, если вы прокручиваете окно чата до тех пор, пока не достигнете границы прокрутки, нижележащее окно контактов тоже начнёт прокручиваться, что нежелательно. Предотвратить такое поведение можно, используя overscroll-behavior-y ( overscroll-behavior также подойдет) для окна чата, как показано ниже:
.messages height: 220px; overflow: auto; overscroll-behavior-y: contain; >
Мы также хотим избавиться от стандартного overscroll-эффекта при прокрутке контактов вверх или вниз (например, Chrome на Android обновляет страницу при прокрутке за пределы верхней границы). Это можно предотвратить, установив для элемента значение overscroll-behavior: none :
body margin: 0; overscroll-behavior: none; >
Спецификации
| Specification |
|---|
| CSS Overscroll Behavior Module Level 1 # overscroll-behavior-properties |
Browser compatibility
BCD tables only load in the browser
См. также
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on 11 окт. 2023 г. by MDN contributors.
Your blueprint for a better internet.
MDN
Support
- Product help
- Report an issue
Our communities
Developers
- Web Technologies
- Learn Web Development
- MDN Plus
- Hacks Blog
- Website Privacy Notice
- Cookies
- Legal
- Community Participation Guidelines
Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.
Как отключить скроллинг страницы?
Необходимо отключить скроллинг body, скролл бар должен присутствовать просто не работать, при повороте колесика мыши не должно ничего происходить, и при тач событиях, т.е в телефоне тоже скролл не должен работать.
- Вопрос задан более трёх лет назад
- 6203 просмотра
Комментировать
Решения вопроса 3
WapSter @wapster92 Куратор тега JavaScript
Как вариант
window.addEventListener('scroll', e => < window.scrollTo() >)UPD В хроме все норм, но в других браузерах дерганье. Так что надежнее при помощи css, но скролл бар пропадет
Ответ написан более трёх лет назад
Комментировать
Нравится 1 Комментировать
scroll-behavior
scroll-behavior — CSS-свойство, которое определяет поведение прокрутки для любого элемента на странице. Отрабатывается в момент автоматической прокрутки навигационных элементов, либо CSSOM прокручивается API. Любые другие прокручивания, например, те, которые выполняются пользователем, не затрагиваются этим свойством. Если это свойство указано на корневой элемент, оно относится ко всему viewport пространству.
Юзер-агенты могут игнорировать это свойство.
| Начальное значение | auto |
|---|---|
| Применяется к | прокручиваемые блоки |
| Наследуется | нет |
| Обработка значения | как указано |
| Animation type | Not animatable |
Синтаксис
/* Ключевые значения */ scroll-behavior: auto; scroll-behavior: smooth; /* Глобальные свойства */ scroll-behavior: inherit; scroll-behavior: initial; scroll-behavior: unset;
Значения
Стандартное поведение прокрутки без эффекта плавности.
Элемент прокручивается плавно; используется функция тайминга, определяемая юзер-агентом через период времени, отмеченный в нем. Юзер-агенты должны следовать соглашениям платформы, если таковые имеются.
Синтаксис
scroll-behavior =
auto | (en-US)
smooth
Пример
HTML
nav> a href="#page-1">1a> a href="#page-2">2a> a href="#page-3">3a> nav> scroll-container> scroll-page id="page-1">1scroll-page> scroll-page id="page-2">2scroll-page> scroll-page id="page-3">3scroll-page> scroll-container>
CSS
a display: inline-block; width: 50px; text-decoration: none; > nav, scroll-container display: block; margin: 0 auto; text-align: center; > nav width: 339px; padding: 5px; border: 1px solid black; > scroll-container display: block; width: 350px; height: 200px; overflow-y: scroll; scroll-behavior: smooth; > scroll-page display: flex; align-items: center; justify-content: center; height: 100%; font-size: 5em; >
Результат
Характеристики
| Specification |
|---|
| CSS Overflow Module Level 3 # smooth-scrolling |
Совместимость с браузерами
BCD tables only load in the browser
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on 18 окт. 2023 г. by MDN contributors.
Your blueprint for a better internet.
MDN
Support
- Product help
- Report an issue
Our communities
Developers
- Web Technologies
- Learn Web Development
- MDN Plus
- Hacks Blog
- Website Privacy Notice
- Cookies
- Legal
- Community Participation Guidelines
Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.