Блог

Я создал небольшой код, который позволяет тексту обтекать некоторые фигуры. Использование простого Javsscript: Смотрите http://jsfiddle.net/lobin/YPBmJ/2 /

Чего я пытаюсь добиться, так это того, что фигура фиксирована и при прокрутке текст будет прокручиваться вокруг фигуры. Я оставляю фигуру фиксированной с помощью JS, привязанной к событию прокрутки, но это приводит к тому, что рендеринг не адаптируется к новой ситуации (см. jsfiddle).

Есть идеи, как это могло бы работать?

HTML:

 <div class="box"><div class="shapewrapper"></div>Some long Text</div>
  

CSS:

 .box {
    width:600px;
    height:400px;
    position: absolute;
    overflow-y: scroll;
}
.box .shapewrapper {
    position: relative;
}
.box .shapewrapper .left {
    background-color: #f00;
    height:1px;
    float:left;
    clear:left;
}
  

JS:

     var hbratio=10;
    var h=$(".box").height();
    for (i=h;i>0;i--) {
        b=Math.round(i/10);
        $(".shapewrapper").prepend('<div class="left" style="width:' b 'px;" />');
    }
    $(".box").scroll(function() {
        var y=$(".box").scrollTop();
        $(".shapewrapper").css("top",eval(y) 'px');
    });
  

(Идея от http://www.csstextwrap.com )

Я не знаю, есть ли способ достичь этого с помощью css (самостоятельно), но я придумал решение, которое включает jQuery.

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

   $(".box").scroll(function() {
        $(".box .left").first().css("margin-top", $(this).scrollTop() "px");
    });
  

Для того, чтобы это работало, пользователь должен фактически прокручивать элемент box, поэтому я изменил CSS для box на overflow: auto. Это также сработало бы, если бы пользователь прокручивал родительский элемент, но тогда селектор для события прокрутки необходимо было бы изменить на родительский элемент.

Я создал новый jsFiddle, чтобы продемонстрировать это: http://jsfiddle.net/EwQ5J/1 /