[csswg-drafts] [css-scroll-snap] Snap point selection when scrolling into view should try to make targeted element visible (#9917)

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

== [css-scroll-snap] Snap point selection when scrolling into view should try to make targeted element visible ==
The [css-scroll-snap-1 6.2 Choosing Snap Positions](https://drafts.csswg.org/css-scroll-snap-1/#choosing) specification does not require scrolling the target into view unless the target itself establishes a snap position. As a result, scroll snap can result in a scrollIntoView or anchor navigation not actually scrolling to the correct snap position to show the target element.

For example, consider a scroller which has pages that snap into view and each page contains items which are sometimes scroll targets. Calling scrollIntoView on a target can result in scroll snap selecting the next or previous position. [See a live demo](https://jsbin.com/waqujux/edit?html,output)
```html
<style>
.scroller {
  overflow: x mandatory;
  scroll-snap-type: x mandatory;
  width: 300px;
}
.page {
  scroll-snap-align: center;
  display: inline-block;
}
.target {
  width: 100px;
  display: inline-block;
}
</style>
<div class="scroller smooth">
  <div class="page">
    <div class="target" id="t1">1</div>
    <div class="target" id="t2">2</div>
    <div class="target" id="t3">3</div>
  </div>
  <div class="page">
    <div class="target" id="t4">4</div>
    <div class="target" id="t5">5</div>
    <div class="target" id="t6">6</div>
  </div>
  <div class="page">
    <div class="target" id="t7">7</div>
    <div class="target" id="t8">8</div>
    <div class="target" id="t9">9</div>
  </div>
</div>
```

On this example (try it in the live demo), the following issues occur:
Starting from page 1,
- clicking on item 4 does not scroll,
- clicking on item 7 scrolls to page 2, but should scroll to page 3.
Starting from page 2,
- clicking on item 3 or 7 does not scroll.
Starting from page 3,
- clicking on item 6 does not scroll
- clicking on item 3 scrolls to page 2, but should scroll to page 1.

I believe this affects all operations attempting to scroll elements into view.

TLDR; I think the snap point selection algorithm should require that we select the snap area which results in the target element being visible. There may be situations where there is no such snap area, in which case I think it's okay that we scroll as close as we can to the target, but this case has a clear expectation.

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


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

Received on Wednesday, 7 February 2024 16:37:46 UTC