如何结合溢出：可见和溢出：在CSS中滚动？ [英] How to combine overflow:visible and overflow:scroll in CSS?

问题描述

我正在处理一个具有水平滚动和多列的页面。文本的第一列应该在页面的中心，其他列也应该可见。这里是一个草图，它演示了我现在有一个可滚动列的文章：

  .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; 
} 
  

如果此效果需要，您可以通过转换，动画或javaScript来控制它。

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:

解决方案

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.

这篇关于如何结合溢出：可见和溢出：在CSS中滚动？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！