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

Question

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

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

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

image 1 – starting position image 2 – while scrolling image 3 – scroll end position

you cannot combine those two, one will trigger auto to the other one. Beside, you look for visible and scroll for the same direction , aren't you ? — G-Cyrillus
– G-Cyrillus, Commented Jun 15, 2014 at 14:42
I know, that I cannot combine these two, but I am looking for something which produces a similar result – scroll with visible overflow. — Pwdr
– Pwdr, Commented Jun 15, 2014 at 14:46

G-Cyrillus · Accepted Answer · 2014-06-15 14:37:08Z

1

Not too sure of what you are looking for, but here is a hint with display and text-indent:

DEMO

CSS to demonstrate 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 this effect wanted, you may look for a way via transition, animation or javaScript to take control over it.

answered Jun 15, 2014 at 14:37

G-Cyrillus

107k14 gold badges116 silver badges135 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Pwdr Over a year ago

This will not work, because I have multiple (more than two) columns and the scrolling should be done manually. But the idea with text-indent is interesting.

G-Cyrillus Over a year ago

@Pwdr If you combine pointer-events and bigger text-indent maybe this gives a bit more ideas : codepen.io/gc-nomade/pen/KJEic , here what you can do (with image but can be columns) and a bit more efficient codepen.io/gc-nomade/pen/ActpB you need to retrieve width from javascript to set text-indent value or margin or translate , whatever is the technic you want to support

Pwdr Over a year ago

Thanks for your help! Your idea with text-indent led me to padding – this basically does what I want, the only problem is, that the last column cannot be scrolled to the starting position (the last image in first post), so padding-right seems not to be working there. new jsFiddle

G-Cyrillus Over a year ago

@Pwdr as i suggested you need to retrive width of element in order to get it's width and set the proper value to the negative text-indent (or margin...) . check this where scrollwidth of ul is used and not width :) codepen.io/gc-nomade/pen/KJzLD notice the way to update/insert the rule .

Collectives™ on Stack Overflow

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

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related