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

社会主义新天地 提交于 2020-01-06 03:27:26

问题


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:


回答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.



来源:https://stackoverflow.com/questions/24230472/how-to-combine-overflowvisible-and-overflowscroll-in-css

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!