一、存在问题:
【1】线条会随着滚动条一起滚动;
【2】线条SVG存在在多地方引用,存在罩层问题,或者遮挡问题,设置z-index无效
二、解决思路:
1、【1】问题解决办法:
a、可以用transform: scale(0.8) CSS样式来缩小画布,达到取消滚动条的目的
示例代码:
transform: scale(0.8);
-moz-transform: scale(0.8); /* Firefox */
-webkit-transform:scale(0.8); /* Safari and Chrome */
-ms-transform:scale(0.8);
b、采用问题【2】的办法,通过移动SVG到里层,自定义发挥了
c、加入滚动条监听,并使用自定义position()方法:
leader_line.position(); 备注:leader_line为线条预设自定义的变量
2、【2】问题问题阐述及解决办法:
阐述:
leader-line,默认生成在最外层body下,如果业务存在多层,且存在多个地方引用时,就无法用全局样式z-index来控制外层显示,比如弹窗,页面线条设置z-index:1,弹窗部分线条设置z-index:999,当关闭弹窗时,z-index就会变成最高值,如果再打开其他弹窗,那么线条会线上在弹窗之上,无法再通过z-index控制;
解决办法:
可以把外层svg拷贝到需要的DIV里面,并删除最外层svg;用这种方法能解决很多问题。
二、其他知识点:
1、移除线条:leader_line.remove()
2、显示线条:leader_line.show()
3、隐藏线条:leader_line.hide()
PS:有其他问题也可以留言,说不定做项目过程中也遇到过