My Plan: I am working on incorporating HTML content from an external source into my app, displayed in a 2-column horizontal scrolling book format using a WebView element. I want it to resemble how the Edge browser presents an EPUB book, with seamless horizontal scrolling when clicking the margins for that page-turning effect.
https://i.sstatic.net/7w95e.jpg
Progress Update: To mimic this behavior, I created an infinitely wide div and placed the external HTML content in another div, utilizing column-width to achieve the dual columns display without scroll bars. An onClick event allows users to scroll left or right through the screen width. However, I find this method somewhat makeshift as the central alignment of the columns gets disrupted during scrolling.
Fiddle link - https://jsfiddle.net/j2bdtwuf/9/
Challenge Encountered: Whenever the window is resized, the column layout readjusts itself, resulting in misalignment where columns shift to configurations like half-column:full-column:half-column instead of staying centrally positioned. Scroll a bit in the demo fiddle, then resize the window to witness this issue firsthand.
My goal is to maintain a consistent two-column view that stays fixed regardless of resizing, only adjusting its contents while retaining the center position of the columns.
Inquiry: I acknowledge that my current approach appears makeshift; hence, I seek a more effective way to implement the features outlined above. Specifically, achieving central positioning of columns during scrolling and window resizes, ensuring a seamless user experience.