Выравнивание колонки после скролла

Здравствуйте, уважаемое сообщество!
Прошу вашей помощи в следующем вопросе:

Есть html-страница с текстом:
<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>

и стиль к ней:
article {  
    -webkit-column-count:20;  
    -moz-column-count:20;  
    column-count:20;  
}  

Эту страницу мы загружаем в браузер под android (хотя без разницы, главное — показать принцип). При горизонтальном скролле, если установить позицию так, чтобы было видно части 2х колонок на экране и «тапнуть» (кликнуть, нажать ...) на одну из них, то она спозиционируется точно посередине устройства.
Как сделать так, чтобы при скролле пальцем, если видна большая часть следующей колонки, то она должен спозиционироваться посередине устройства, как при «тапе» нап неё.

Прямой аналог — приложение для чтения книг Bookmate под android. При чтении книги эта задача у них решена. Как они сделали это?

Простите за мой русский ((
Подсказки и идеи (даже безумные) приветствуются.
Спасибо!
  • Вопрос задан
  • 5013 просмотров
Решения вопроса 1
Наверное, после того, как пользователь закончил 'скроллить', вам нужно пересчитать `offsetLeft` для контэйнера, так что бы показать нужную колонку целиком. Приблизительный набросок сделал (webkit only) jsbin
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
07 авг. 2020, в 19:51
2000 руб./за проект
07 авг. 2020, в 19:24
4000 руб./за проект