Как отключить прокрутку страницы css
Перейти к содержимому

Как отключить прокрутку страницы css

  • автор:

scroll — behavior

Управляет поведением прокрутки внутри блока. Значение smooth делает её плавной.

Пример

Скопировать ссылку «Пример» Скопировано

 html  scroll-behavior: smooth;> html  scroll-behavior: smooth; >      

Как понять

Скопировать ссылку «Как понять» Скопировано

При переходе по якорной ссылке браузер мгновенно прыгает к целевому блоку. То же самое происходит, если изменять положение полосы прокрутки при помощи JS. Чтобы изменить стандартное поведение можно использовать значение smooth . Оно сделает прокрутку плавной. Но в остальных ситуациях, например, при прокрутке пользователем колёсика мышки, свойство scroll — behavior не повлияет на поведение браузера.

Как пишется

Скопировать ссылку «Как пишется» Скопировано

Возможные значения scroll — behavior :

  • auto — значение по умолчанию, мгновенная прокрутка;
  • smooth — плавная прокрутка.

Подсказки

Скопировать ссылку «Подсказки» Скопировано

�� Если вы хотите указать scroll — behavior для всей страницы, указывайте его для селектора html . Для селектора body свойство не сработает.

�� Значение scroll — behavior не наследуется — его нужно указывать для каждого блока с собственной полосой прокрутки.

�� Браузер сам управляет скоростью и временем плавной прокрутки, сейчас нет способа на это влиять.

На практике

Скопировать ссылку «На практике» Скопировано

Татьяна Фокина советует

Скопировать ссылку «Татьяна Фокина советует» Скопировано

�� Пользователи могут по какой-то причине отключить анимацию в системе. Например, их укачивает от плавной прокрутки на странице с большим количеством контента. Чтобы этого не произошло, можно использовать директиву @media с проверкой значения prefers — reduced — motion в условии и анимировать прокрутку только тогда, когда пользователь не отключил анимацию.

 @media (prefers-reduced-motion: no-preference)  .smooth-scroll  scroll-behavior: smooth; >> @media (prefers-reduced-motion: no-preference)  .smooth-scroll  scroll-behavior: smooth; > >      

[РЕШЕНО] Ненужный скролл внизу страницы. Как убрать?

Здравствуйте! Нигде не могу найти решения моей проблемы.
В подвале страницы появляется полоса прокрутки, которая ведет в пустоту (посмотреть можно здесь). Ширина фиксированная (тема на основе Zen) 960px. Есть подозрение в сторону меню (nice menu). Выставлял min-width : 960px ; , max-width : 960px ; на body, после этого скролл пропадает, но и страница смачно прижимается к левому краю. Если нет очевидного решения (надеюсь есть), может задать min-width : 960px ; и «отлепить» ее с помощью margin-left? overflow-x : hidden ; также не решает проблему.

  • Drupal7
  • Есть вопрос
  • Блог
  • Войдите или зарегистрируйтесь, чтобы отправлять комментарии

Комментарии

xxandeadxx 4 сентября 2011 в 14:12

для .glidecontenttoggler корректную ширину пропишите
http://getfirebug.com/

  • Войдите или зарегистрируйтесь, чтобы отправлять комментарии
  • Реакции

«xxandeadxx» wrote:
для .glidecontenttoggler корректную ширину

А я .glidecontenttoggler не нашел.

Удалось поправить правилом:

#main-wrapper <
overflow : hidden ;
>

  • Войдите или зарегистрируйтесь, чтобы отправлять комментарии
  • Реакции

thezoom 4 сентября 2011 в 15:21
«xxandeadxx» wrote:
для .glidecontenttoggler корректную ширину

А я .glidecontenttoggler не нашел.

Удалось поправить правилом:

#main-wrapper <
overflow : hidden ;
>

  • Войдите или зарегистрируйтесь, чтобы отправлять комментарии
  • Реакции

xxandeadxx 10 ноября 2015 в 11:47
А я .glidecontenttoggler не нашел.

«xxandeadxx» wrote:

  • Войдите или зарегистрируйтесь, чтобы отправлять комментарии
  • Реакции

Незнакомые элементы на чужих сайтах начинаю искать при помощи

$ ( ‘.glidecontenttoggler’ ) ;

Так здесь этот код возвращает null. Хотя этот класс в коде присутствует.

Что-бы это значило?

  • Войдите или зарегистрируйтесь, чтобы отправлять комментарии
  • Реакции

$(‘.glidecontenttoggler’);

«thezoom» wrote:

  • Войдите или зарегистрируйтесь, чтобы отправлять комментарии
  • Реакции

Методы xxandeadxx и v1adimir@drupal.org решили проблему со скроллом, но родили новую. Тизеры (2х2) на главной странице прижались влево.

  • Войдите или зарегистрируйтесь, чтобы отправлять комментарии
  • Реакции

Задал для них ширину, разлиплись. Не знаю правильное ли решение, но работает. Хотя не так хорошо, как хотелось бы. Блоки кривые какие-то стали. Один ниже, другой выше.

  • Войдите или зарегистрируйтесь, чтобы отправлять комментарии
  • Реакции

УСЁ, text-align: center; улучшил ситуацию

  • Войдите или зарегистрируйтесь, чтобы отправлять комментарии
  • Реакции

ага, понятно. спасибо!

  • Войдите или зарегистрируйтесь, чтобы отправлять комментарии
  • Реакции

Столкнулся с подобной проблемой. Капаю третий день — решить не могу.
Прошу помощи.
Как убрать лишний скролл внизу?
http://www.ot-prirody.ru/

  • Войдите или зарегистрируйтесь, чтобы отправлять комментарии
  • Реакции

На сайте указаном выше не увидел никакого лишнего скрола.
Похоже на спам!

  • Войдите или зарегистрируйтесь, чтобы отправлять комментарии
  • Реакции

«grob.82» wrote:

На сайте указаном выше не увидел никакого лишнего скрола.
Похоже на спам!

Перепроверил во всех браузерах — лишний скролл внизу станицы присутствует.

  • Войдите или зарегистрируйтесь, чтобы отправлять комментарии
  • Реакции

«kosHta» wrote:
В Хроме от 25 до 110 нет, появляется на +125%, нормально же.

скролл бывает вертикальный и горизонтальный

а по делу -нехрен темы лепить в артистире ,либо в нем изменяйте ширину ,либо в css файле

  • Войдите или зарегистрируйтесь, чтобы отправлять комментарии
  • Реакции

«drupby» wrote:
скролл бывает вертикальный и горизонтальный

Подразумевается горизонтальный
«drupby» wrote:
а по делу -нехрен темы лепить в артистире ,

Никто ничего не лепил — тема взята с друпал-орг.

«drupby» wrote:
Либо в нем изменяйте ширину ,либо в css файле

Говорю, пытался разобраться в css три дня — не выходит. Возможно где-то противоречия.
Можете подсказать?

  • Войдите или зарегистрируйтесь, чтобы отправлять комментарии
  • Реакции

«Kluchnik31» wrote:

Говорю, пытался разобраться в css три дня — не выходит. Возможно где-то противоречия.
Можете подсказать?

Вся тема — противоречие. Скорее всего, проблемы лезут отсюда:
div .b2-header-center <
position : relative ;
width : 1920px ;
left : 50% ;
>

div .b2-header-png <
position : absolute ;
left : -50% ;
top : 0 ;
width : 1920px ;
height : 80px ;
background-image : url ( ‘images/header.png’ ) ;
background-repeat : no-repeat ;
background-position : center center ;
>

Дешевле взять дизайн и переверстать шаблон на css-фреймворке. В данном случае это даже быстрее, чем писать здесь посты с просьбами о помощи.

  • Войдите или зарегистрируйтесь, чтобы отправлять комментарии
  • Реакции

«kosHta» wrote:

  • Войдите или зарегистрируйтесь, чтобы отправлять комментарии
  • Реакции

Всем спасибо, разобрался.
Оказывается у lu менюшки было абсолютное позиционирование и заданные размеры в 1200px.
После удаления фиксированного размера ушёл и скролл.
В выявлении причины очень помог web developer firefox (возможно, тоже будет для кого-то полезен).

  • Войдите или зарегистрируйтесь, чтобы отправлять комментарии
  • Реакции

Как отключить прокрутку страницы, когда открыто меню?

AntonLitvinenko

Мне больше нравиться вариант с добавлением класса.
Например:

В css добавляем

.no_scroll

А в js При открытии меню
$(‘body’).addClass(‘no_scroll’)
При закрытии
$(‘body’).removeClass(‘no_scroll’)

Если нужно чтобы документ не прыгал когда у body исчезает скролл можно использовать функцию.

function calcScroll()

И при открытии добавить еще
$(‘body’).css(‘margin-right’, calcScroll()+’px’)
При закрытии убрать
$(‘body’).css(‘margin-right’, ‘0px’)

Переполнение

Утилиты для управления тем, как элемент обрабатывает контент, который слишком велик для контейнера.

Show all classes

Используйте overflow-visible , чтобы предотвратить обрезку содержимого внутри элемента. Обратите внимание, что любое содержимое, выходящее за границы элемента, будет тогда видимым.

Andrew Alfred Technical advisor

div class="overflow-visible . ">div>

Используйте overflow-hidden , чтобы вырезать любое содержимое внутри элемента, выходящее за границы этого элемента.

Andrew Alfred Technical advisor

div class="overflow-hidden . ">div>

Используйте overflow-auto , чтобы добавить полосы прокрутки к элементу в случае, если его содержимое выходит за границы этого элемента. В отличие от overflow-scroll , которая всегда показывает полосы прокрутки, эта утилита покажет их только в том случае, если прокрутка необходима.

Andrew Alfred Technical advisor
Debra Houston Analyst
Jane White Director, Marketing
Ray Flint Technical Advisor

div class="overflow-auto . ">div>

Используйте overflow-x-auto , чтобы разрешить горизонтальную прокрутку, если это необходимо.

Andrew
Emily
Whitney
David
Kristin
Sarah

div class="overflow-x-auto . ">div>

Используйте overflow-y-auto , чтобы разрешить вертикальную прокрутку, если это необходимо.

Andrew Alfred Technical advisor
Debra Houston Analyst
Jane White Director, Marketing
Ray Flint Technical Advisor

div class="overflow-y-auto h-32 . ">div>

Используйте overflow-x-scroll , чтобы разрешить горизонтальную прокрутку и всегда показывать полосы прокрутки, если операционная система не отключила всегда видимые полосы прокрутки.

Andrew
Emily
Whitney
David
Kristin
Sarah

div class="overflow-x-scroll . ">div>

Используйте overflow-y-scroll , чтобы разрешить вертикальную прокрутку и всегда показывать полосы прокрутки, если операционная система не отключила всегда видимые полосы прокрутки.

Andrew Alfred Technical advisor
Debra Houston Analyst
Jane White Director, Marketing
Ray Flint Technical Advisor

div class="overflow-y-scroll . ">div>

Используйте overflow-scroll , чтобы добавить полосы прокрутки к элементу. В отличие от overflow-auto, которая показывает полосы прокрутки только в случае необходимости, эта утилита показывает их всегда. Обратите внимание, что некоторые операционные системы (например, macOS) скрывают ненужные полосы прокрутки независимо от этого параметра.

5 AM Flight to vancouver Toronto YYZ
6 AM Breakfast Mel’s Diner
5 PM �� Party party �� We like to party!

div class="overflow-scroll . ">div>

Tailwind позволяет условно применять служебные классы в разных состояниях с помощью модификаторов вариантов. Например, используйте hover : overflow-scroll , чтобы применять утилиту overflow-scroll только при hover .

div class="overflow-auto hover:overflow-scroll"> div> 

Полный список всех доступных модификаторов состояния смотрите в документации Наведение, фокус и другие состояния.

Вы также можете использовать модификаторы вариантов для таргетинга на медиа-запросы, такие как реагирующие контрольные точки, темный режим, предпочтения с уменьшенным движением и многое другое. Например, используйте md: overflow-scroll , чтобы применить утилиту overflow-scroll только на экранах среднего размера и выше.

div class="overflow-auto md:overflow-scroll"> div> 

Copyright © 2023 Tailwind Labs Inc.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *