9

現在、CSS または JavaScript を使用した CSS で複数列のスクロールを行う方法はありますか?

これが何を意味するかを説明するために、jsfiddle で簡単なデモをセットアップしました。

http://jsfiddle.net/S7AGp/

div 内のテキストが多すぎる場合、新しいテキストが一番右の列の下部から表示され、古いテキストが一番左の列の上に表示されるように、垂直方向にスクロールできるようにしたいと考えています - 基本的に、テキストのように - 2 列を除く。

代わりに、水平方向にスクロールする必要がある余分な列が作成されます。

テキストの各行を配列に格納し、スクロール時にそれを変更することもできますが、プレーンな CSS でこれを行う方法が既にあるのか、それとも JavaScript を介したソリューションが既に存在するのかに興味がありました。ありがとう！

4

3 に答える 3

5

垂直スクロールの CSS 列。

http://jsfiddle.net/MmLQL/3/

HTML

    <div runat="server" id="div_scroll">
       <div runat="server" id="div_columns">
          <p> Some text ...</p>
       </div>
    </div>

CSS

    #div_scroll {
    overflow-y: scroll;
    overflow-x: hidden;
    width: 1060px; /*modify to suit*/
    height: 340px; /*modify to suit*/
    }

    #div_columns
    {
    direction:ltr; /*column direction ltr or rtl - modify to suit*/
    columns: 3; /*number of columns - modify to suit*/
    overflow-y: hidden;
    overflow-x: hidden;
    width: 1000px; /*width of columns div has to be specified - modify to suit*/
    /* do not specify height parameter as it has to be unrestricted*/
    padding: 20px;  
    }
于 2013-05-21T16:35:13.020 に答える
1

css リージョンのようなものについて質問していると思います: http://net.tutsplus.com/tutorials/html-css-techniques/diving-into-css-regions/

HTML:

<p class="example-text">"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."</p>

<div class="regions"></div>
<div class="regions"></div>

CSS:

.example-text {
  -webkit-flow-into: example-text-flow;
  padding: 0;
  margin: 0;
}

.regions {
   -webkit-flow-from: example-text-flow;
   border: 1px solid black;
   padding: 2px;
   margin: 5px;
   width: 200px;
   height: 50px;
}

現在、サポートは Webkit に限定されています: http://caniuse.com/css-regions

残念ながら、フォールバックや交換については知りません。

于 2012-06-02T20:46:49.270 に答える
0

悪い例：
絶対配置をすばやく試してください：http：//jsfiddle.net/PhilippeVay/S7AGp/1/、を使用bottom: 0;してテキストの下部をコンテナの下部に配置することを考えています。

絶対配置ではフローからコンテンツが削除され、コンテナには何も残っていないため、機能しません（たとえば、スクロールバーafaikで絶対配置された要素を移動しない場合）。

良い例：
これがscrollTop（）を使用した解決策です。

注：私はjQueryを使用しましたが、プロジェクトの他の場所でjQueryまたは別のフレームワークを使用しない場合は、これをJSに含める必要があります

于 2012-06-02T21:59:46.480 に答える