Css отступ от скролла

CSS scroll-margin Property

Set scroll margin to 20px between the snap position and the container:

More «Try it Yourself» examples below.

Definition and Usage

The scroll-margin property specifies the distance between the snap position and the container.

This means that when you stop scrolling, the scrolling will quickly adjust and stop at a specified distance between the snap position and the container.

Snap position is the position on the child element where it snaps into place in the container when you stop scrolling.

Note: In the example above, scroll margin is set on all sides, but only the scroll margin on the top side changes the scrolling behaviour because the scroll-snap-align property is set to «start».

The scroll-margin property is a shorthand property for the following properties:

Values for the scroll-margin property can be set in different ways:

If the scroll-margin property has four values:

• scroll-margin: 15px 30px 60px 90px;
  • top distance is 15px
  • right distance is 30px
  • bottom distance is 60px
  • left distance is 90px

  If the scroll-margin property has three values:

  • scroll-margin: 15px 30px 60px;
    • top distance is 15px
    • left and right distances are 30px
    • bottom distance is 60px

    If the scroll-margin property has two values:

    • scroll-margin: 15px 30px;
      • top and bottom distances are 15px
      • left and right distances are 30px

      If the scroll-margin property has one value:

      To see the effect from the scroll-margin property, the scroll-margin and scroll-snap-align properties must be set on the child elements, and the scroll-snap-type property must be set on the parent element.

      Default value:	0
      Inherited:	no
      Animatable:	no. Read about animatable
      Version:	CSS3
      JavaScript syntax:	object.style.scrollMargin=»20px» Try it

      Browser Support

      The numbers in the table specify the first browser version that fully supports the property.

      Источник

      scroll-margin

      The scroll-margin shorthand property sets all of the scroll margins of an element at once, assigning values much like the margin property does for margins of an element.

      Try it

      Constituent properties

      This property is a shorthand for the following CSS properties:

      Syntax

      /* values */ scroll-margin: 10px; scroll-margin: 1em 0.5em 1em 1em; /* Global values */ scroll-margin: inherit; scroll-margin: initial; scroll-margin: revert; scroll-margin: revert-layer; scroll-margin: unset; 

      Values

      An outset from the corresponding edge of the scroll container.

      Description

      You can see the effect of scroll-margin by scrolling to a point partway between two of the «pages» of the example’s content. The value specified for scroll-margin determines how much of the page that’s primarily outside the snapport should remain visible.

      Thus, the scroll-margin values represent outsets defining the scroll snap area that is used for snapping this box to the snapport. The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container’s coordinate space), then adding the specified outsets.

      Formal definition

      • scroll-margin-bottom : 0
      • scroll-margin-left : 0
      • scroll-margin-right : 0
      • scroll-margin-top : 0
      • scroll-margin-bottom : as specified
      • scroll-margin-left : as specified
      • scroll-margin-right : as specified
      • scroll-margin-top : as specified

      Formal syntax

      Examples

      Simple demonstration

      This example implements something very similar to the interactive example above, except that here we’ll explain to you how it’s implemented.

      The aim here is to create four horizontally-scrolling blocks, the second and third of which snap into place, near but not quite at the left of each block.

      HTML

      The HTML that represents the blocks is very simple:

      div class="scroller"> div>1div> div>2div> div>3div> div>4div> div> 

      CSS

      Let’s walk through the CSS. The outer container is styled like this:

      .scroller  text-align: left; width: 250px; height: 250px; overflow-x: scroll; display: flex; box-sizing: border-box; border: 1px solid #000; scroll-snap-type: x mandatory; > 

      The main parts relevant to the scroll snapping are overflow-x: scroll , which makes sure the contents will scroll and not be hidden, and scroll-snap-type: x mandatory , which dictates that scroll snapping must occur along the horizontal axis, and the scrolling will always come to rest on a snap point.

      The child elements are styled as follows:

      .scroller > div  flex: 0 0 250px; width: 250px; background-color: #663399; color: #fff; font-size: 30px; display: flex; align-items: center; justify-content: center; scroll-snap-align: start; > .scroller > div:nth-child(2n)  background-color: #fff; color: #663399; > 

      The most relevant part here is scroll-snap-align: start , which specifies that the left-hand edges (the «starts» along the x axis, in our case) are the designated snap points.

      Last of all we specify the scroll margin-values, a different one for the second and third child elements:

      .scroller > div:nth-child(2)  scroll-margin: 1rem; > .scroller > div:nth-child(3)  scroll-margin: 2rem; > 

      This means that when scrolling past the middle child elements, the scrolling will snap to 1rem outside the left edge of the second , and 2rems outside the left edge of the third .

      Note: Here we are setting scroll-margin on all sides at once, but only the start edge is really relevant. It would work just as well here to only set a scroll margin on that one edge, for example with scroll-margin-inline-start: 1rem , or scroll-margin: 0 0 0 1rem .

      Result

      Specifications

      Источник

      scrollbar — gutter

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

      Время чтения: меньше 5 мин

      Кратко

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

      scrollbar — gutter решает проблему с «прыгающей» шириной контента при появлении или скрытии скроллбара. Обычно эта проблема появляется при изменении высоты контента или появлении модального окна.

      Проблема со скроллбаром

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

      В примере ниже у нас длина контента превышает высоту экрана, поэтому скроллбар виден всегда. Но при появлении модального окна мы прячем скроллбар, задав overflow : hidden у body . Это довольно частое решение — мы не хотим чтобы можно было прокручивать страницу при открытом модальном окне.

      Но как это исправить? Можно компенсировать удаление скроллбара добавлением отступов у , но мы сразу натыкаемся на ряд проблем:

      1. Разные браузеры могут иметь разную ширину скроллбара. И даже если сейчас ширина скроллбара совпадает с общепринятой, разработчикам браузера ничего не мешает поменять её (хоть это и очень маловероятно) в одном из будущих обновлений.
      2. Есть два типа скроллбара — статичный и оверлей. Оверлей не виден по умолчанию, но появляется поверх страницы при её прокрутке. Если мы добавим отступ при оверлейном скроллбаре, мы не скомпенсируем, а наоборот, добавим сдвиг контента при открытии модалки.

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

      Как пишется

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

      У scrollbar — gutter 3 возможных значения:

      1. auto — дефолтное значение. Если задано overflow : scroll или overflow : auto и контент вызывает переполнение, то появится отступ для скроллбара.
      2. stable — отступ для скроллбара появляется если значение overflow равно hidden , scroll или auto , вне зависимости от того, вызывает контент переполнение или нет.
      3. stable both — edges — то же самое что и stable , но отступы будут создаваться с двух противоположных сторон. При вертикальной прокрутке — справа и слева, при горизонтальной — сверху и снизу.

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

      В нашем случае используем scrollbar — gutter : stable чтобы при скрытии прокрутки через overflow : hidden у нас появился отступ вместо скроллбара и контент остался на месте.

       html,body  scrollbar-gutter: stable;> html, body  scrollbar-gutter: stable; >    Скопировать Скопировано Не удалось скопировать   

      Поддержка

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

      scrollbar — gutter поддерживается всеми современными браузерами, кроме Safari. Подробнее можно посмотреть на Can I Use.

      Источник

      Как добавить отступ scrollbar`у?

      Здравствуйте, делаю кастомный scrollbar. Возникли две проблемы. Во-первых, scrollbar вплотную стоит к div`у.

      

      Во-вторых, у него стоит border-radius: 2px; , но с правой стороны оно не применяется. Проблема в том, что Bootstrap использует для всех элементов на странице box-sizing: border-box; . Я пробовал прописывать div`у box-sizing: content-box!important; , но это не помогло

      

      

      

      Во-вторых, у него стоит border-radius: 2px;, но с правой стороны оно не применяется. Проблема в том, что Bootstrap использует для всех элементов на странице box-sizing: border-box;. Я пробовал прописывать div`у box-sizing: content-box!important;, но это не помогло

      Когда я через инструменты разработчика убираю свойство box-sizing: border-box , то проблема исчезает

      Артур Кудашев, box-sizing не может влиять на радиус углов. скорее всего, професор прав, и дело там в margin или padding, на которые box-sizing как раз-таки влияет

      

      Артур Кудашев, прежде чем делать какие-то там выводы и прочее, сначала берешь и проверяешь, если не получается, значит не там проверяешь. И box-sizing тут совершенно не причем. Хочешь отступ от скорола, добавь padding-right: 10px блоку у которого прокрутка. Если у тебя бордер не закругляется, значит либо не там закругляешь, либо не так закругляешь, либо блок чем-то перекрыт. У тебя по F12 испектор, берешь и проверяешь стили.

      Источник

      scroll-margin¶

      Сокращенное свойство scroll-margin задает сразу все поля прокрутки элемента, присваивая значения так же, как свойство margin делает для полей элемента.

      Демо¶

      Это свойство является сокращением для следующих свойств CSS:

      Синтаксис¶

      /* values */ scroll-margin: 10px; scroll-margin: 1em 0.5em 1em 1em; /* Global values */ scroll-margin: inherit; scroll-margin: initial; scroll-margin: revert; scroll-margin: revert-layer; scroll-margin: unset; 

      Спецификация¶

      Поддержка браузерами¶

      Пример¶

      div class="scroller"> div>1div> div>2div> div>3div> div>4div> div> 

       1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35

      .scroller  text-align: left; width: 250px; height: 250px; overflow-x: scroll; display: flex; box-sizing: border-box; border: 1px solid #000; scroll-snap-type: x mandatory; > .scroller > div  flex: 0 0 250px; width: 250px; background-color: #663399; color: #fff; font-size: 30px; display: flex; align-items: center; justify-content: center; scroll-snap-align: start; > .scroller > div:nth-child(2n)  background-color: #fff; color: #663399; > .scroller > div:nth-child(2)  scroll-margin: 1rem; > .scroller > div:nth-child(3)  scroll-margin: 2rem; > 

      Источник

      Читайте также:  Sublime text 3 плагины для html css