Column alignment after scrolling

Question

css

Hello dear community!
I ask for your help in the following question:

There is an html page with the text:

<article>  
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc libero magna, venenatis quis aliquet et,  
    rutrum in augue. Donec vel tempor dolor. Donec volutpat fringilla porta. Suspendisse non nulla tortor.  
    Quisque commodo ornare mi, sit amet aliquet justo bibendum non. Integer bibendum convallis sapien, sit  
    amet tincidunt orci placerat in. Integer vitae consequat augue.  
  
    //и т.д.
</article>

and style for it:

article {  
    -webkit-column-count:20;  
    -moz-column-count:20;  
    column-count:20;  
}  

We load this page into the browser under android (although it doesn’t matter, the main thing is to show the principle). With horizontal scrolling, if you set the position so that you can see parts of 2 columns on the screen and “tap” (click, press ...) on one of them, then it will be positioned exactly in the middle of the device.
How to make it so that when scrolling with a finger, if most of the next column is visible, then it should be positioned in the middle of the device, as with a “tap” on it.

A direct analogue is the Bookmate book reader application for android. When reading the book, they solved this problem. How did they do it?

Excuse my Russian ((
Hints and ideas (even crazy ones) are welcome.
Thank you!

Answer 1

Probably after the user has finished 'scrolling' you need to recalculate the `offsetLeft` for the container so that the full column is shown. Rough sketch made by (webkit only) jsbin