I have successfully implemented a horizontal scroll container using <HTML/> and CSS:
body {
background-color: #212121;
}
.scroll_container {
height: 100px;
width: 400px;
display: flex;
align-items: center;
overflow-y: hidden;
width: 100%;
height: 20%;
}
.scroll_container_sub {
height: 100px;
min-width: 230px;
float: none;
display: inline-block;
zoom: 1;
margin: 10px;
border: solid 1px transparent;
border-radius: 15px;
background-color: #fff;
}<div class="scroll_container">
<div class="scroll_container_sub"></div>
<div class="scroll_container_sub"></div>
<div class="scroll_container_sub"></div>
</div>What I am attempting to accomplish:
Is it feasible to automatically center one item (
scroll_container_sub) within the scroll_container every time? This would be especially beneficial for mobile users.EXAMPLE:
After scrolling, the middle item should be centered horizontally:
https://i.sstatic.net/F14C8.png
(image: mobile view)
This means situations like the following should not occur:
https://i.sstatic.net/E8FTm.png
Because none of the containers are centered. Ideally, when looking at a scroll position like this, the scroll view would automatically center one of the containers.
For a more detailed explanation: :)
In the following link, you can see what I am trying to achieve. Pay attention to the first few seconds.
The cards are consistently centered after the user swipes. This is exactly what I am striving for:
https://www.youtube.com/watch?v=UsXv6VRqZKs Do you need a live example? No Problem. You can find them in the Google Play Store. For instance, consider this swiper:
https://i.sstatic.net/5CyUA.jpg
~filip