Hi all,
I’m wondering if there is a way to align the overflow with the entered div instead of starting at the first div. Basically overflow on both sides and you can scroll left or right.
This is how it currently starts with div 1 (heart eyes) 1st up.
This is how I want it to start, div 3 (smiley face) in centre and can scroll either to div 1 or div 6 left or right.
Thanks in advance!
Here is my site Read-Only: LINK
(how to share your site Read-Only link)
Hey @terrance , this can be achieved with a small custom code snippet. I do not know the structure of your overflow container, so I am going to showcase how I did it.
Create your first container, call it’s class as overflow_container and give it an id of overflow.
Set it’s display to flex-horizontal justify-content: left
Set it’s overflow to Auto
Add your emoji divs within it.
Now comes some Vanilla JS. Go into your Page settings, scroll to Before </body> tag and add this code
<script>
// Overflow scroll will start in the middle of the content (50% of the container's width)
var overflowContainer = document.getElementById('overflow');
overflowContainer.scrollTo((overflowContainer.offsetWidth/2),0);
</script>
Hi @imtiazraqib, thanks so much for the code! Here is the read only link, am I right in saying that it is not on the true centre? Not sure what I’m doing wrong but there are 5 emoji boxes so that means one should be dead centre with 2 on each side barely visible?