[csswg-drafts] [css-overflow][css-scroll-snap] Introduce mechanism to include snap points in scrollable overflow area (#7885)

johannesodland has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-overflow][css-scroll-snap] Introduce mechanism to include snap points in scrollable overflow area ==

### Problem
It is possible to define unreachable snap points. The used snap position will then be the [position resulting from scrolling as much as possible towards the snap position](https://www.w3.org/TR/css-scroll-snap-1/#unreachable).

**But, in many components,  such as galleries and carousels,  you want the user to be able to reach those snap points.** 

### Current solution
The current solution is to add padding, or ::before and ::after pseudo elements to increase the scrollable overflow area so that the snap points can be reached. 

It is not always possible to use CSS to exactly match the needed area. It is often necessary to use JS to calculate this area so that the scroll container can be scrolled exactly to the snap points, but not further.

To be able to build pure CSS scroll snap components, we need a way to be able to extend the scrollable overflow area so that all snap points can be reached.

### Proposal
Add a property to control the scrollable overflow area. 

```
overflow-area: [ normal | include-snap-points ]
```
(Names up for bikeshedding.)


```html
<div class=gallery>
  <img ...><img ...><img ...>
</div>
```

```css
.gallery {
  scroll-snap-type: inline mandatory; 
  overflow-area: include-snap-points;
}

.gallery img {
  scroll-snap-align: center;
}
```


Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/7885 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Saturday, 15 October 2022 08:24:56 UTC