Увеличивайте расстояние прокрутки при нажатии стрелки полосы прокрутки - PullRequest
Новая
       60

Увеличивайте расстояние прокрутки при нажатии стрелки полосы прокрутки

0 голосов
/ 08 июля 2020

Есть ли способ заставить браузер выполнять прокрутку на большее расстояние при нажатии стрелки на полосе прокрутки?

Я пытаюсь заставить окно перейти к следующему элементу в a css контекст scroll-behavior / scroll-snap.

Прямо сейчас движение слишком маленькое, и вид будет просто возвращаться (к «1») вместо того, чтобы прыгать вперед (до «2») .

Я знаю, что это легко сделать с другими управляющими входами, такими как прикосновение, клавиши или колеса мыши с прикрепленными событиями прокрутки, специальные пользовательские кнопки и т. Д. c., Но меня особенно интересуют что происходит, когда нажимаются эти маленькие стрелки.

JSFiddle:

https://jsfiddle.net/0pfe8rax/

<head>
<base href="https://upload.wikimedia.org/wikipedia/commons/thumb/">
<style>
.slide {
  display:flex;
  white-space:nowrap;
  overflow-x:scroll;
  overflow-y:hidden;
  scroll-behavior:smooth;
  scroll-snap-type:x mandatory;
}
.slide img {
  scroll-snap-align:start;
  width:100%;}
@media (min-width:640px){
  .slide img {width:50%;}  
}
@media (min-width:960px){
  .slide img {width:33.33%;}  
}
</style>
</head>
<body>
<div class="slide">
<img src="0/08/Un1.svg/1200px-Un1.svg.png" alt="1" />
<img src="3/3b/Deux.svg/1200px-Deux.svg.png" alt="2" />
<img src="6/6d/Trois.svg/1200px-Trois.svg.png" alt="3" />
<img src="e/e4/Quatre.svg/1200px-Quatre.svg.png" alt="4" />
<img src="5/5a/Cinq.svg/1200px-Cinq.svg.png" alt="5" />
</div>
</body>
...