I'm currently working on a unique user interface that features a scrolling list of options. The goal is for users to easily find and select the option they are looking for by simply scrolling or swiping.
However, I've encountered an issue where a single scroll movement skips multiple positions in the list. For example, if the top element displays "1" and I scroll once, I end up with "4" at the top instead of the expected "2".
The code I've implemented functions smoothly on IOS Chrome and Safari, performing exceptionally well on mobile devices.
How can I achieve the same seamless scrolling behavior on desktop browsers using CSS or JavaScript (perhaps jQuery)? Have I overlooked an error in my implementation?
Below is a snippet of basic HTML and CSS code for reference (for full-page viewing): (HTML structure can vary from divs within a div tag (as shown below), to options within a select tag, or list items within ul/ol tags)
.box {
background-color: yellowgreen;
height: 300px;
overflow: hidden;
}
.scroll {
width: 100%;
height: 100%;
background-color: aliceblue;
overflow-y: scroll;
scroll-snap-type: y mandatory;
scroll-snap-stop: always;
}
.scroll div {
display: flex;
align-items: center;
justify-content: center;
height: 40px;
margin: 5px 0;
padding: 10px;
background-color: lightpink;
scroll-snap-align: center;
}
.scroll div:first-of-type {
margin-top: calc((50% - 20px));
}
.scroll div:last-of-type {
margin-bottom: calc((50% - 20px));
}<div class="box">
<div class="scroll">
<div>List item: 1</div>
<div>List item: 2</div>
<div>List item: 3</div>
<div>List item: 4</div>
<div>List item: 5</div>
<div>List item: 6</div>
<div>List item: 7</div>
<div>List item: 8</div>
<div>List item: 9</div>
<div>List item: 10</div>
</div>
</div>