Как создать горизонтально прокручиваемые контейнеры

Не стоит брать width/height из CSS

Мы рассмотрели метрики, которые есть у DOM-элементов, и которые можно использовать для получения различных высот, ширин и прочих расстояний.

Но как мы знаем из главы Стили и классы, CSS-высоту и ширину можно извлечь, используя .

Так почему бы не получать, к примеру, ширину элемента при помощи , вот так?

Почему мы должны использовать свойства-метрики вместо этого? На то есть две причины:

  1. Во-первых, CSS-свойства зависят от другого свойства – , которое определяет, «что такое», собственно, эти CSS-ширина и высота. Получается, что изменение , к примеру, для более удобной вёрстки, сломает такой JavaScript.

  2. Во-вторых, в CSS свойства могут быть равны , например, для инлайнового элемента:

    Конечно, с точки зрения CSS – совершенно нормально, но нам-то в JavaScript нужен конкретный размер в , который мы могли бы использовать для вычислений. Получается, что в данном случае ширина из CSS вообще бесполезна.

Есть и ещё одна причина: полоса прокрутки. Бывает, без полосы прокрутки код работает прекрасно, но стоит ей появиться, как начинают проявляться баги. Так происходит потому, что полоса прокрутки «отъедает» место от области внутреннего содержимого в некоторых браузерах. Таким образом, реальная ширина содержимого меньше CSS-ширины. Как раз это и учитывают свойства .

…Но с ситуация иная. Некоторые браузеры (например, Chrome) возвращают реальную внутреннюю ширину с вычетом ширины полосы прокрутки, а некоторые (например, Firefox) – именно CSS-свойство (игнорируя полосу прокрутки). Эти кроссбраузерные отличия – ещё один повод не использовать , а использовать свойства-метрики.

Если ваш браузер показывает полосу прокрутки (например, под Windows почти все браузеры так делают), то вы можете протестировать это сами, нажав на кнопку в ифрейме ниже.

У элемента с текстом в стилях указано CSS-свойство .

На ОС Windows браузеры Firefox, Chrome и Edge резервируют место для полосы прокрутки. Но Firefox отображает , в то время как Chrome и Edge – меньше. Это из-за того, что Firefox возвращает именно CSS-ширину, а остальные браузеры – «реальную» ширину за вычетом прокрутки.

Обратите внимание: описанные различия касаются только чтения свойства из JavaScript, визуальное отображение корректно в обоих случаях

Как убрать полосы прокрутки? | htmlbook.ru

Internet Explorer Chrome Opera Safari Firefox Android iOS
6.0+ 1.0+ 6.0+ 1.0+ 1.0+ 1.0+ 1.0+

Решение

Перед тем как убрать полосы прокрутки с веб-страницы, подумайте, действительно ли вам это так необходимо. Отсутствие возможности прокрутки содержимого документа создает трудности посетителям сайта для просмотра информации. Если же существует острая необходимость построения дизайнерских изысков или желание создать своим читателям трудности, то вперед. Но вас предупреждали!

Способ основан на использовании свойства overflow, которое добавляется к селектору HTML, как показано в примере 1.

Пример 1. Страница без полос прокрутки

HTML5CSS2.1IECrOpSaFx

В данном примере используется значение hidden, которое «обрезает» весь контент выходящий за рамки элемента.

Также можно использовать свойство overflow-x, чтобы скрыть только горизонтальную полосу прокрутки и overflow-y — для сокрытия вертикальной полосы. В примере 2 показано добавление слоя с минимальной шириной 800 пикселов. При уменьшении окна браузера до этой величины, слой перестаёт менять свои размеры и появляется горизонтальная полоса прокрутки. С помощью свойства overflow-x полосы прокрутки скрываются.

Пример 2. Нет горизонтальной полосы прокрутки

HTML5CSS3IECrOpSaFx

Свойства overflow-x и overflow-y входят в спецификацию CSS3 и не проходят валидацию при проверке стилей на CSS2.1.

Исследования

В отчете Уильяма Бакстона и Брэда Майерса 1986 года были протестированы различные способы взаимодействия с двумя руками, включая прокрутку, щелчок и изменение размера. В их исследовании нажатие и изменение размера выполнялись параллельно. В первом эксперименте участникам предлагалось выполнить задачу выбора / позиционирования, а во втором эксперименте участникам предлагалось выполнить сложную задачу навигации / выбора. Исследование показало, что пользователи могут выполнять эти задачи быстрее и параллельно, когда они используют обе руки, но не обязательно, когда они используют обе руки одновременно. Они также обнаружили, что чем более взаимосвязанными были задачи, которые пользователь выполнял каждой рукой, тем быстрее они выполняли задачи, которые их просили выполнить.

Hide Scrollbars But Keep Functionality

To hide the scrollbars, but still be able to keep scrolling, you can use the following code:

Example

/* Hide scrollbar for Chrome, Safari and Opera */
.example::-webkit-scrollbar {  display: none;}/* Hide scrollbar
for IE, Edge and Firefox */.example {  -ms-overflow-style: none;  /*
IE and Edge */  scrollbar-width: none;  /* Firefox */}

Webkit browsers, such as Chrome, Safari and Opera, supports the non-standard pseudo element, which allows us to modify the look of the browser’s scrollbar. IE and Edge supports the property,
and Firefox supports the property, which allows us to hide the scrollbar, but keep functionality.

❮ Previous
Next ❯

Больше

Fullscreen VideoМодальные коробкиШкалаИндикатор прокруткиСтроки хода выполненияПанель уменийПолзунки диапазонаПодсказкиPopupsСкладнойКалендарьHTML вставкаСписокПогрузчикиЗвездвРейтинг пользователейЭффект наложенияКонтактные фишкиКартыКарточка профиляОповещенияЗаметкиМеткиКругиКупонОтзывчивый текстФиксированный нижний колонтитулЛипкий элементОдинаковая высотаClearfixСнэк-барПрокрутка рисункаЛипкий заголовокТаблица ценПараллаксПропорцииПереключение типа/не нравитсяВключить скрытие/отображениеПереключение текстаПереключение классаДобавить классУдалить классАктивный классУвеличить HoverПереход при наведенииСтрелкиФормыОкно браузераНастраиваемая полоса прокруткиЦвет заполнителяВертикальная линияАнимация значковТаймер обратного отсчетаМашинкуСкоро страницаСообщения чатаРазделить экранОтзывыЦитаты слайд-шоуЗакрываемые элементы спискаТипичные точки останова устройстваПеретаскивание HTML-элементаКнопка спуска на входеJS медиа запросыJS анимацииПолучить элементы IFRAME

Как пользоваться

Допустим у нас есть элемент с id «el». Тогда наш код будет примерно таким:

const el = document.getElementById('el');
el.scrollIntoView();

В вышеуказанном примере страница прокрутиться до верхней границы элемента. Если нам нужно, чтобы прокрутилось до нижней то нам нужно передать false в метод.

const el = document.getElementById('el');
el.scrollIntoView(); // Прокрутка до верхней границы
el.scrollIntoView(false); // Прокрутка до нижней границы

Бывают и другие нужды, например если нам нужно прокрутить страницу так, чтобы блок оказался в центре. И тут нужно сказать, что функция scrollIntoView() может принимать разные параметры:

element.scrollIntoView(alignToTop); // Булевые параметры true или false
element.scrollIntoView(scrollIntoViewOptions); // Объект с параметрами

В объекте могут быть разные параметры:

  • block — определяет вертикальное выравнивание. Доступные значения: start, center,end и nearest (ближайший). По умолчанию center
  • inline — определяет горизонтальное выравнивание. Актуально если есть карусель элементов или другой горизонтальный скроллинг. Доступные значения: start, center,end и nearest (ближайший). По умолчанию nearest
  • behavior — определяет анимацию перехода. Значение одно из двух. auto и smooth(плавное). По умолчанию auto

Теперь мы знаем какие параметры в объекте может принимать метод.

Как отладить проблемы горизонтальной прокрутки

Теперь, когда мы знаем причины горизонтальной прокрутки, я объясню некоторые способы, которые могут помочь нам определить эти проблемы и решить их.

Используйте CSS Outline

Это первое, что я обычно делаю для отладки.

Добавляя это, мы можем заметить, какие элементы имеют большую ширину, чтобы мы могли решить эту проблему. Адди Османи развил это с помощью своего простого сценария:

Этот скрипт выполняет случайное выделение цветов контура, что упрощает его, вместо того чтобы все контуры были одного цвета.

Firefox ярлык scroll

В Firefox есть небольшая метка, добавленная к элементам, которые вызывают горизонтальную прокрутку. Разве это не круто?

Удаление элементов

Иногда описанные выше методы не работают. В этом случае я открываю DevTools, а затем начинаю удалять элементы и замечаю. Как только горизонтальная прокрутка исчезла, я могу определить элемент, который вызывает проблему.

Как убрать полосу прокрутки?

Это видео о том, как убрать полосу прокрутки при с просмотре и публикации сайта в программе Adobe Muse.

Существует 2 способа как это можно сделать:
1. Первый из них – просто убрать элементы находящиеся за пределами области контента в режиме “Дизайна” страницы.
2. Второй – с помощью размещения специального кода html в раздел head страницы.

Смотрите это видео:

“В этом видео уроке мы рассмотрим как убрать полосу прокрутки при просмотре страницы в браузере в программе Adobe Muse.

Как убрать полосу прокрутки. Описание проблемы.

Давайте откроем сразу программу, здесь создан новый проект. Здесь сделаем 75% масштаб, на всякий случай. И увеличим страницу. Допустим, у нас есть на странице несколько объектов – раз, два, три. Здесь у нас какой-то текст, логотипы, картинки всё что угодно. И случайно вы разместили объект вне области контента страницы.

Когда вы нажимаете значок «выделение», этот объект будет у вас не заметен. Особенное, если у вас выключена функция «показывать поля фрейма», а в предыдущих версиях это было по-умолчанию, края фрейма были видны только при наведении мышки на него. Тот объект, который находится за пределами страницы будет вообще не виден, пока вы не наведёте на него мышкой.

Таким образом, при просмотре страницы в браузере, у вас появляется горизонтальная прокрутка, которая всем так мешает на сайте. К тому же, если у вас установлена заливка основного фона страницы,  например зелёный цвет, то при просмотре и прокрутке страницы до конца, вы увидите, что ваша страница имеет горизонтальную прокрутку, так будет лучше видно.

Как убрать полосу прокрутки. Решение 1.

Мы идём в режим дизайна страницы, даже если у вас выключена функция «края фрейма», можете нажать сочетание клавиш Ctrl+A и таким образом выделите все объекты у себя на странице. Далее уменьшаете масштаб до 50% или зажимаете клавишу Alt, и крутите колесо мышки на себя. Таким образом, вы увидите что у вас есть объекты за областью контента страницы.

Для того, что бы убрать горизонтальную прокрутку, вам нужно удалить эти ненужные объекты, или переместить их в область контента страницы.

Нажимаем сочетание клавиш Ctrl+, и видим, что у нас за областью контента страницы ничего нет.

Идём в режим просмотра, и теперь у нас горизонтальная прокрутка в браузере отсутствует.

Как убрать полосу прокрутки. Решение 2.

Если у вас не получилось данным способом убрать горизонтальную прокрутку, то есть ещё один способ, когда вы можете просто отключить эту прокрутку у себя на странице.

Необходимо зайти в меню “Страница”, “Свойства страницы”, и здесь в разделе «Метаданные»,  в блоке HTML для head, вставить кое-какой код, который я вам сейчас покажу. Этот код вы можете увидеть в описании этого видео, скопировать его и вставить. Выглядит он вот так.

1
2
3
4

<style type=»text/css»>

html {overflow-xhidden;}

body {overflow-xhidden;}

</style>

Выделяем его (я нажимаю сочетание клавиш Ctrl+C), захожу снова в режим дизайна страницы, в свойствах страницы вставляю его вот сюда,  и нажимаю ОК.

Таким образом, даже если какой-то блок будет расположен вне области контента страницы, при просмотре страницы в браузере, у вас горизонтальная прокрутка также будет отсутствовать.

Как убрать полосу прокрутки. Заключение

На этом мы заканчиваем наш урок. На нем мы узнали как убрать полосу прокрутки при просмотре страницы в браузере в программе Adobe Muse.

А я не прощаюсь с вами, подписывайтесь на мой канал, ставьте лайки, пишите комментарии и смотрите мои предыдущие и следующие видео уроки. До встречи друзья, пока.”

Как убрать полосу прокрутки. Дополнение к уроку.

Для тех у кого не срабатывает данный код и полоса прокрутки все равно остается – пробуйте сначала почистить кеш браузера. Также можете пробовать вот эти коды вместо представленного выше:

Удаление любой прокрутки:

1
2
3
4
5
6

<style type=»text/css»>

html {overflow-xhidden;}

body {overflow-xhidden;}

html {overflow-yhidden;}

body {overflow-yhidden;}

</style>

Автор видеоурока
Дмитрий Шаповалов

Как включить линейку в Ворде

Линейка в Microsoft Word — это вертикальная и горизонтальная полосы, расположенные на полях, то есть за пределами страницы. По умолчанию этот инструмент отключен в документе, по крайней мере, если говорить о последних версиях текстового редактора. В этой статье мы расскажем о том, как включить столь иногда необходимый элемент, обеспечивающий более удобную работу.

Включение линейки в Ворде

Прежде чем заняться решением озвученной в заголовке задачи, давайте разберемся, зачем вообще нужна линейка в Word. В первую очередь, этот инструмент необходим для выравнивания текста на странице по горизонтали и вертикали, а вместе с ним таблиц, диаграмм, фигур и графических элементов, если таковые имеются в документе. Само же выравнивание содержимого осуществляется относительно друг друга либо же относительно границ документа. Определившись с теорией, можем смело приступать к практике.

Линейка в Word 2007-2019 / MS Office 365

Несмотря на то что из года в год интерфейс приложений из пакета MS Office хоть и незначительно, но все же меняется, а вместе с этим переименовываются некоторые важные элементы и опции, интересующее нас включение линейки во всех версиях Word (за исключением 2003) выполняется одинаково.

Линейка в Word 2003

Если же вы по каким-то причинам все еще пользуетесь морально и, что более важно, функционально устаревшим Ворд 2003, для включения в нем линейки обратитесь к меню вкладки «Вид», в котором просто установите галочку напротив пункта «Линейка»

Устранение возможных проблем

Бывает и так, что с отображением линейки в текстовом документе Ворд возникают разного рода проблемы. К счастью, все они легко устранимы.

Линейка не отображается или отображается только горизонтальноПо умолчанию, и чаще всего этот параметр не меняется пользователем, работа с документом Word осуществляется в «Режиме разметки». Это стандартное для программы представление, и если включить в нем «Линейку», она появится как в горизонтальной, так и в вертикальной плоскости. Во всех остальных режимах отображения будет показана либо только горизонтальная линейка, либо она будет отсутствовать вовсе. Наглядный пример:

  • «Разметка страницы» — отображаются обе линейки;

«Режим чтения» — линейки не отображаются;
«Веб-документ» — только горизонтальная;
«Структура» — линеек нет;
«Черновик» — только горизонтальная, показывающая реальную ширину страницы, при этом визуально страница не имеет границ и кажется бесконечной.

Отображается только горизонтальная линейка (в «Разметке страницы») Если вы работаете с документом в режиме «Разметки страницы», но при этом видите только горизонтальную линейку, необходимо выполнить следующее:

  1. Откройте меню «Файл» и перейдите к разделу «Параметры» (расположен в самом низу боковой панели. В старых версиях Word для этого необходимо нажать по расположенному в левом верхнем углу логотипу MS Office, а затем, когда будет открыто меню, по кнопке «Параметры Word».

В отобразившемся диалоговом окне перейдите во вкладку «Дополнительно». Пролистайте перечень доступных в данном разделе опций до блока «Отображение» (ранее он назывался «Экран») и установите галочку напротив пункта «Показывать вертикальную линейку в режиме разметки». Для подтверждения внесенных изменений нажмите «ОК».

В Word 2003 для активации обозначенной выше опции необходимо открыть «Параметры» (меню «Сервис»), а затем во вкладке «Вид» открывшегося диалогового окна установить галочку напротив пункта «вертикальная линейка (режим разметки)», расположенного в блоке «Параметры режима разметки веб-документа». Сделав это, воспользуйтесь кнопкой «ОК» для подтверждения.

Есть у проблемы отображения вертикальной линейки в Ворде и еще одна причина – отключен показ полей в документе. Решение в данном случае тоже весьма простое:

  1. Откройте «Параметры» программы (через меню «Файл» или кнопку с лого MS Office, зависит от версии).
  2. В окне настроек перейдите во вкладку «Отображение» и установите галочку напротив пункта «Показывать поля между страницами в режиме разметки».Так это делается в актуальных версиях Word, а в программе 2003 года нужно действовать по немного иному алгоритму:
  3. После того как вы измените указанный выше параметр и нажмите «ОК» для подтверждения своих действий, в текстовом документе будет отображаться не только горизонтальная, но и вертикальная линейка.

Заключение

Вот так просто можно включить отображение горизонтальной и вертикальной линейки в текстовом документе Microsoft Word. Если же в процессе выполнения данной процедуры возникли какие-либо проблемы, теперь вы будете знать, как их устранить.

Мы рады, что смогли помочь Вам в решении проблемы.

Ширина/высота страницы с учётом прокрутки

Теоретически, видимая часть страницы – это , а полный размер с учётом прокрутки – по аналогии, .

Это верно для обычных элементов.

А вот для страницы с этими свойствами возникает проблема, когда прокрутка то есть, то нет. В этом случае они работают некорректно. В браузерах Chrome/Safari и Opera при отсутствии прокрутки значение в этом случае может быть даже меньше, чем , что, конечно же, выглядит как совершеннейшая чепуха и нонсенс.

Эта проблема возникает именно для , то есть для всей страницы.

Надёжно определить размер страницы с учётом прокрутки можно, взяв максимум из нескольких свойств:

Почему так? Лучше и не спрашивайте, это одно из редких мест, где просто ошибки в браузерах. Глубокой логики здесь нет.

Проблемы горизонтальной прокрутки

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

Элементы, которые абсолютно / фиксированы

Когда есть элемент, который имеет значение позиции  или  , существует возможность вызвать для него горизонтальную прокрутку. Это может произойти , когда одно из значений  

,  позиционирует элемент снаружи элемента тела.

Чтобы решить эту проблему, вам необходимо проверить, почему этот элемент расположен вне области просмотра. Если в этом нет необходимости, его нужно удалить или отредактировать значение позиции.

Элементы Grid

Сетка CSS имеет три случая, которые могут привести к горизонтальной прокрутке. Давайте посмотрим их.

Использование значений пикселей для столбцов

При использовании значений пикселей это приведет к проблемам, когда ширина области просмотра мала. Увидеть ниже:

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

Использование Minmax ()

Может быть заманчиво забыть о тестировании для мобильных устройств, так как это приведет к горизонтальной прокрутке в некоторой точке, поскольку минимальная ширина равна  .

Простое исправление для того, чтобы сбросить  до  и изменить его , когда окно просмотра больше.

Использование процентов вместо фракции

Согласно этому твиту от Джейка Арчибальда, если мы использовали процент для столбцов сетки, а затем добавили  , это вызовет горизонтальную прокрутку. Причина в том, что значение добавляется к ширине контейнера.

Чтобы исправить это, избегайте использования процентов для столбцов сетки и используйте вместо этого  . При использовании  будет вычитаться из доступного пространства.

Flex Wrap

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

Выше не достаточно. Обязательно добавьте,  чтобы избежать неожиданных переполнений.  

Длинные слова или ссылки

Когда речь идет о длинных словах или ссылках, размещенных внутри контента, он должен переходить на новую строку или иначе, как вы уже догадались! Там будет горизонтальная прокрутка.

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

Или мы можем использовать  :  

Изображения без max-width: 100% набора на них

Если вы не используете сброс CSS, вы можете случайно забыть использовать  для всех  , так как это сделает их отзывчивыми на мобильных устройствах. Если нет, это вызовет проблемы. Пожалуйста, проверьте .

Использование фиксированной ширины

Фиксированная ширина может вызвать проблемы при использовании, и, как правило, я стараюсь избегать ее настолько, насколько могу. Если это действительно необходимо, то лучше использовать его  , поэтому, если места недостаточно для значения  , тогда все  будет работать.

Добавление  позволит избежать горизонтальной прокрутки.  

Примеры использования и примеры

Простой слайдер

Мы можем создать быстрый и простой слайдер, обрезая содержимое по горизонтали и позволяя ему прокручиваться.

В макете выше у нас есть карты, которые разложены горизонтально, и есть полоса прокрутки, которая позволяет нам прокручивать и раскрывать больше контента. Чтобы реализовать это, нам нужно будет сделать следующее:

  1. Показать карты в одной строке. Я буду использовать  для этого.
  2. Добавьте  в контейнер.

И это работает на настольных браузерах. Однако при тестировании этого в Safari для iOS (12.4.1) прокрутка не работала. После некоторых проб и ошибок прокрутка сработала, когда я добавил ширину дочерним элементам. Работает без проблем для iOS (13.3).

Модальный контент

Когда модальное содержимое слишком длинное, мы можем легко сделать область прокручиваемой. Для этого у нас должно быть следующее:

  1. Максимальная высота для modal.
  2. Модальное тело должно занимать все доступное пространство.

Карта с закругленными краями

Когда у нас есть карта, и мы хотим, чтобы ее углы были закруглены, мы склонны добавлять  для верхнего и нижнего углов, как показано ниже:

Это может занять много времени, особенно если карта имеет другой дизайн на мобильном телефоне. Например, вместо того, чтобы складывать дочерние элементы, они будут рядом друг с другом.

Для этого случая полезно использовать обертку  , а затем добавить  к ней. Увидеть ниже:

Тем не менее, это решение имеет некоторые оговорки, которые могут сделать его идеальным для всех случаев. Пожалуйста, проверьте правильность.

Усечение текста

Для учета длинного контента мы можем обрезать текст с помощью свойства  .

На элемент, который мы хотим усечь, я добавил следующее:

Вот и все! Обратите внимание, что  важно, чтобы это работало

Анимации

Когда дело доходит до анимации, выгода  заключается в обрезании скрытых элементов, которые можно показывать при наведении курсора. Посмотрите на рисунок ниже:

В CSS это будет выглядеть так:

У нас есть две кнопки, и у каждой есть псевдоэлемент, который переводится влево и вниз, соответственно. Смотрите видео ниже:

Оцените статью
Рейтинг автора
5
Материал подготовил
Андрей Измаилов
Наш эксперт
Написано статей
116
Добавить комментарий