展示
为了防止看花眼
我就手动敲下面的文字
原本我偷懒
直接就是列表1，列表2
后来测试发现不行
内容太接近
滚动时候
无法准确感受到靠近效果
这样是不行的
做东西就要精益求精
demo页面也应如此
然后这里的刘海形状只是近似
两个圆角要模拟
需要更细致的shape-outside设置
这里仅仅使用两个转角点表示
而且为了和后面的内容有间隙
shape区域右侧
刻意扩大了大约5像素
现在看到的刘海
是覆盖上面的一个图
实际生效的是后面浮动的shape
在iOS 10.2之前还需要webkit
私有前缀
因此，实际代码还需要webkit
Chrome可以不需要
然后此功能需要JS配合
只能对内联信息进行跟随控制
理论上还可以使用CSS region实现
但没有这个方法容易理解
代码
CSS代码：
.box {
max-width: 414px;
height: 480px;
border: solid #000;
margin: auto;
overflow: auto;
}
.shape {
float: left;
width: 30px; height: 340px;
shape-outside: polygon(0 0, 0 150px, 16px 154px, 30px 166px, 30px 314px, 16px 326px, 0 330px, 0 0);
transition: shape-outside .15s;
}
.liuhai {
width: 24px; height: 180px;
background: url(liu.png) no-repeat left center;
position: absolute;
margin-top: 150px;
}
.content ul {
list-style: none;
padding: 0;
margin: 0;
}
.content li {
border-bottom: 1px solid #eee;
padding: .5em;
}
HTML代码：
为了防止看花眼我就手动敲下面的文字原本我偷懒
...
理论上还可以使用CSS region实现但没有这个方法容易理解
JS代码：
var eleShape = document.getElementById('shape');
var eleBox = document.getElementById('box');
// 保证shape元素高度足够
eleShape.style.height = eleBox.scrollHeight + 'px';
var funShape = function () {
var scrollTop = eleBox.scrollTop;
// 滚动偏移应用在shape-outside上
var shapeOutside = 'polygon(0 0, 0 '+ (150 + scrollTop) +'px, 16px '+ (154 + scrollTop) +'px, 30px '+ (166 + scrollTop) +'px, 30px '+ (314 + scrollTop) +'px, 16px '+ (326 + scrollTop) +'px, 0 '+ (330 + scrollTop) +'px, 0 0)';
eleShape.style.shapeOutside = shapeOutside;
};
// 滚动时候实时改变shape形状
eleBox.addEventListener('scroll', funShape);
funShape();
