https://i.sstatic.net/PzNmP.gif
Looking at the gif, you can see a large scrollable container with various main blocks ('Attack', 'Release', etc.) housed within it. Each main block contains one or multiple columns (such as 'Attack time' under Attack, and 'Threshold', 'Density', etc. under Levels).
The basic HTML structure is outlined below:
<div class="big-scrollable">
<div class="main-block">
<h4>Attack</h4>
<div class="column-container">
<div class="column">
<!-- Attack time -->
<... content ...>
</div>
<div class="column shown-when-expanded">
<!-- Some other column -->
</div>
</div>
</div>
<div class="main-block>
<h4>Release</h4>
<div class="column-container">
<div class="column">
<!-- Release time -->
...
</div>
...
</div>
</div>
...
</div>
I am aiming for the big scrollable container to snap to each small column like 'Attack time', 'Release time', 'Threshold', 'Density', etc.
I attempted styling the elements using the following CSS:
.big-scrollable
{
overflow-x: auto;
scroll-behavior: smooth;
scroll-snap-type: x proximity;
}
.column
{
scroll-snap-align: start;
}
However, this approach did not work as expected. Is there a way to achieve this purely through CSS, or will I need to resort to JavaScript?
EDIT:
The Codepen example shared by Jonas Weinhardt does seem to work and uses similar CSS settings.
I have included more of the code I am working with in the Pastebin snippets below. (Please note that I have altered the class names for better clarity in this question)
Important HTML: https://pastebin.com/DjvJt8v1
Important CSS: https://pastebin.com/tmLQQhbU