How to combine overflow: visible and overflow: scrolling in CSS?

Question

I am working on a horizontal scroll page and multiple columns. The first column of text should be centered on the page, and the other columns should also be visible. Here is a sketch demonstrating what I have now - an article with scrollable columns: jsfiddle . I would also like to see the overflow text. I know that overflow-y:visible and overflow-y:scroll cannot be combined, but how to achieve something similar?

Only the text (article) should be scrollable, and not the entire page.

Here are some images that illustrate what I would like to do:

Answer 1

Not too sure what you're looking for, but here's a tip with a display and text indent:

Demo

CSS to demonstrate the idea:

 .article-wrapper { border:solid; width:600px; margin:auto; text-indent:0; transition:1s } .article-wrapper:hover { text-indent:-500px;; } article { text-indent:0; display:inline-block; height:400px; width:500px; column-width:500px; } 

If you need this effect, you can look for a way through the transition, animation, or javaScript to control it.