CSS scroll-snap-stop property

src

CSS scroll-snap-stop allows a possible snap position to trap the scrolling operation. It forces the scroll container to stop the scrolling operaton before it naturally ends.

Remember that this property has no effect on scrolling operations with only intended end position.

Syntax

scroll-snap-stop : normal | always

Property values

normalDefault: The scroll container may pass over snap positions during the execution of a scrolling mechanism.; scroll-snap-stop: normal;
Try it
always: The scroll container should not pass over snap positions during the execution of a scrolling mechanism.; scroll-snap-stop: always;
Try it

Applicable to

It applies to scroll containers.

Preview

Code

CSS

.img {
 width:250px;
 height:300px;
 border:4px solid yellow;
 scroll-snap-align:center;
}
.photoGallery {
  width: 300px;
  height:300px;
  border:5px solid red;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  scroll-snap-type: x mandatory;
  scroll-snap-stop: always;
}

HTML

<div class="photoGallery">
<img class="img" src="img/img1.jpeg"/>
<img class="img" src="img/img2.jpg"/>
<img class="img" src="img/img3.jpg"/>
<img class="img" src="img/img4.jpg"/>
<img class="img" src="img/img5.jpg"/>
<img class="img" src="img/img6.jpg"/>
</div>

CSS3 Properties

Syntax

Property values

Applicable to