Вертикальная прокрутка с несколькими столбцами в CSS / JavaScript

В настоящее время, есть ли способ сделать прокрутку в несколько столбцов в CSS или CSS с помощью JavaScript?

Чтобы описать, что я имею в виду под этим, я настроил небольшую демонстрацию на jsfiddle:

http: //jsfiddle.net/S7AGp

Когда в элементе div слишком много текста, я бы хотел иметь возможность прокрутки по вертикали, с новым текстом, идущим снизу от крайнего правого столбца, и старым текстом, выходящим над крайним левым столбцом - в основном, как текст -области, кроме двух столбцов.

Вместо этого получается, что он создает дополнительные столбцы, для которых нужно прокручивать по горизонтали.

Хотя я мог бы попытаться сохранить каждую строку текста в массиве, а затем изменить это при прокрутке, мне было любопытно, если уже есть способ сделать это простым CSS или если решение уже существует с помощью JavaScript. Благодарность

Ответы на вопрос(3)

Плохой:
Быстрая попытка с абсолютным позиционированием:http://jsfiddle.net/PhilippeVay/S7AGp/1/ с идеей использованияbottom: 0; расположить нижнюю часть текста в нижней части контейнера.

Это не работает, потому что абсолютное позиционирование удаляет его содержимое из потока, и в контейнере ничего не остается (например, вы не перемещаете абсолютно позиционированный элемент с полосой прокрутки afaik).

Хорошо:
Так вотрешение с использованием scrollTop ().

Примечание: я использовал jQuery, но этот должен быть в JS, если вы не используете jQuery или другую инфраструктуру в другом месте вашего проекта

 David Bradbury04 июн. 2012 г., 03:46
Я высоко ценю время, которое вы провели с этим ответом, но я хочу прокрутить текст из правого столбца в левый столбец, как описано в моем вопросе. Вы предоставили хорошую информацию, хотя и можете предложить альтернативное решение, которое может подойти для некоторых людей.

Я думаю, что вы спрашиваете о чем-то вроде регионов 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;
}

Их поддержка ограничена сейчас веб-комплектом: http://caniuse.com/css-regions

К сожалению, я не знаю ни одного запасного варианта или замены.

 06 июн. 2012 г., 23:37
Регионы CSS были бы идеальным кандидатом для решения этой проблемы. Однако разработка этой функции все еще продолжается. Медленным и мучительным решением было бы разбить ваш текст с помощью JavaScript и сделать верстку самостоятельно. Подумайте, если это усилие имеет смысл для вашего случая использования. Там будут драконы там.
 David Bradbury04 июн. 2012 г., 03:48
Это кажется очень интересным, и я посмотрю на это. Тем не менее, похоже, что он не допускает естественной прокрутки. Я мог бы использовать JavaScript API, если он более поддерживается, чтобы эмулировать то, что я пытаюсь достичь. Однако, спасибо!

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

Ваш ответ на вопрос