使用 jsPlumb 在有滚动条的区域内画线,有滚动条的区域内,连接线会盖过文章,并且不会随着滚动条的滚动一起滚动。
解决办法
- 创建实例时设置线条挂载到滚动区域的DOM内
let plumbIns = jsPlumb.getInstance({
Container: 'content', // 线条挂载区域,不设置会渲染在 body 里
})
- 把滚动DOM开启相对定位
position: relative;
原因
jsPlumb 是默认挂载到body元素上,并且是通过绝对定位定位。
全部代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jsPlumb</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.content{
margin: 50px auto 0;
width: 500px;
height