<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;}
.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(img/liuhai.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;
}
</style>
</head>
<body>
<div id="box" class="box">
<i id="shape" class="shape"></i>
<i class="liuhai"></i>
<div class="content">
<ul>
<li>为了防止看花眼</li>
<li>我就手动敲下面的文字</li>
<li>原本我偷懒</li>
...
<li>理论上还可以使用CSS region实现</li>
<li>但没有这个方法容易理解</li>
<li>但没有这个方法容易理解</li>
<li>但没有这个方法容易理解</li>
<li>但没有这个方法容易理解</li>
<li>但没有这个方法容易理解</li>
<li>但没有这个方法容易理解</li>
<li>但没有这个方法容易理解</li>
<li>但没有这个方法容易理解</li>
<li>但没有这个方法容易理解</li>
<li>但没有这个方法容易理解</li>
<li>但没有这个方法容易理解</li>
<li>但没有这个方法容易理解</li>
</ul>
</div>
</div>
<script type="text/javascript">
window.onload=function(){
var eleShape = document.getElementById('shape');
// console.log(eleShape)
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();
}
</script>
</body>
</html>
