MENU


Scrolling, Snapping

overflow[-x|-y|-block|-inline]
('-block' and '-inline' are like '-x' or '-y' but varies according to the writing mode.)
: visible: the content flows out of the element.
: hidden: any overflowed content is clipped.
: scroll: a scroll bar is added.
: auto: a scroll bar is added only if the content overflows.
: auto hidden: horizontal, vertical.

overflow-anchor
:auto: fixes the scroll position to the current part of the content even if the content resizes; a useful technique to pin the scroll position to the bottom.
:none: scrolls away automatically when the content expands or shrinks.

scroll-behavior
: auto: instantly jumps to the scroll position when scrolled by JavaScript.
: smooth: scrolls to the scroll position in a smooth continuous fashion when scrolled by JavaScript.

html { scroll-behavior: smooth; }

overscroll-behavior[-x | -y | -block | -inline]
('-block' and '-inline' are like '-x' or '-y' but varies according to the writing mode.)
(effect noticeable on mobile browsers only.)
: auto: 'bounces'/refreshes when scrolled to the boundary; scroll chaining occurs, ie. the layer below starts to scroll when the layer above has been scrolled to the end.
: contain: 'bounces'/refreshes; no scroll chaining.
: none: no 'bounce'/refresh; no scroll chaining.

This shrinks-to-fit the <div> element. Setting "overflow:hidden;" in <body> hides the scrollbars of the webpage. Setting 'wrap' to 'off' allows the line to continue without breaking.
RESETRUNFULL
<!DOCTYPE html><html>
<body style="overflow:hidden;">
   <div style="background:orange; display:inline-block;">
      <textarea style="overflow:auto; resize:none" wrap="off"></textarea>
   </div>
</body></html>

scroll-snap-type
: none: ignores snap points.
: x: snaps horizontally only.
: y: snaps vertically only.
: block: snaps along the block axis only.
: inline: snaps along the inline axis only.
: both: snaps both horizontally and vertically.
: mandatory: always snaps when scrolling ends.
: proximity: snaps only when nearing snap points. the default.
: x mandatory: always snaps horizontally.

scroll-snap-align
: none: does not snap.
: start: snaps to the starting edge.
: end: snaps to the central axis.
: center: snaps to the ending edge.

scroll-snap-stop
(not supported by browsers at the time of writing.)
: normal: snaps only when the scrolling stops.
: always: snaps during the scrolling.

scroll-{margin|padding}[-top | -right | -bottom | -left | -block | -block-start | -block-end | -inline | -inline-start | -inline-end]
(with scroll snapping)
: 5px: all four sides.
: 5px 5px: top-bottom, left-right.
: 5px 5px 5px: top, left-right, bottom.
: 5% 5% 5% 5%: top, right, bottom, left.

Below, with mandatory snapping, unless 'scroll-margin' or 'scroll-padding' is defined, there is no way to position the vertical border of one of the <div> elements so that it stays at the center of the container. This is because when the scrolling stops, the container will automatically scroll itself to align the left edge of the <div> element to the left edge of the <nav> element, ie. {scroll-snap-align:start}. Switching to {scroll-snap-align:end} will hide the letters as the snapping will be aligned to the right edge instead.
RESETRUNFULL
<!DOCTYPE html><html><head><style>
nav{    
   width:100px;    
   height:120px;    
   scroll-snap-type: x mandatory;    
   overflow: auto;    
   box-shadow: 3px 3px 3px 3px gray;    
   display: flex;    
   flex-flow: row nowrap;
}
div{    
   height:100px;    
   border: 1px solid black;    
   flex:0 0 120px;    
   scroll-snap-align: start;    
   scroll-snap-stop: always !important;
}
</style></head><body>
   <nav>
      <div>A</div>        
      <div>B</div>        
      <div>C</div>    
   </nav>
</body></html>