Question

我创建了一个小代码，让文本围绕某些形状流动。使用简单的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的想法）

Answer 1

我不知道是否有办法用css（单独）实现这一目标，但我提出了一个涉及jQuery的解决方案。

每当用户滚动＆＃34; .box＆＃34;元素，第一个＆＃34; .left＆＃34;的最高边缘元素应该调整。

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

为了使这项工作，用户必须实际滚动框元素，所以我将框的CSS更改为overflow：auto。用户也可以滚动父元素，但滚动事件的选择器需要更改为父元素。

我创建了一个新的 jsFiddle 来演示它：http://jsfiddle.net/EwQ5J/1/

Flow和Scroll围绕非矩形形状的文本

1 个答案: