网站首页 > 技术文章 正文
一、存在问题:
【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:有其他问题也可以留言,说不定做项目过程中也遇到过
猜你喜欢
- 2024-10-08 「译」22个必备的CSS小技巧(css%)
- 2024-10-08 盘点Pandas 的100个常用函数(pandas所有方法详解)
- 2024-10-08 CSS常考知识点(css的)
- 2024-10-08 CSS position 属性(css position:relative)
- 2024-10-08 CSS学习笔记--定位position属性的学习
- 2024-10-08 CSS3中神奇的box-shadow属性,到现在你还还没听说过吗?
- 2024-10-08 html网页的代码大全(html网页代码大全 分行)
- 2024-10-08 CSS四种定位static、relative、absolute、fixed
- 2024-10-08 徒手撸-登录页面(1)(徒手hit)
- 2024-10-08 请避免犯这9个常见的 CSS “坏习惯”
- 10-02基于深度学习的铸件缺陷检测_如何控制和检测铸件缺陷?有缺陷铸件如何处置?
- 10-02Linux Mint 22.1 Cinnamon Edition 搭建深度学习环境
- 10-02AWD-LSTM语言模型是如何实现的_lstm语言模型
- 10-02NVIDIA Jetson Nano 2GB 系列文章(53):TAO模型训练工具简介
- 10-02使用ONNX和Torchscript加快推理速度的测试
- 10-02tensorflow GPU环境安装踩坑日记_tensorflow配置gpu环境
- 10-02Keye-VL-1.5-8B 快手 Keye-VL— 腾讯云两卡 32GB GPU保姆级部署指南
- 10-02Gateway_gateways
- 最近发表
-
- 基于深度学习的铸件缺陷检测_如何控制和检测铸件缺陷?有缺陷铸件如何处置?
- Linux Mint 22.1 Cinnamon Edition 搭建深度学习环境
- AWD-LSTM语言模型是如何实现的_lstm语言模型
- NVIDIA Jetson Nano 2GB 系列文章(53):TAO模型训练工具简介
- 使用ONNX和Torchscript加快推理速度的测试
- tensorflow GPU环境安装踩坑日记_tensorflow配置gpu环境
- Keye-VL-1.5-8B 快手 Keye-VL— 腾讯云两卡 32GB GPU保姆级部署指南
- Gateway_gateways
- Coze开源本地部署教程_开源canopen
- 扣子开源本地部署教程 丨Coze智能体小白喂饭级指南
- 标签列表
-
- cmd/c (90)
- c++中::是什么意思 (84)
- 标签用于 (71)
- 主键只能有一个吗 (77)
- c#console.writeline不显示 (95)
- pythoncase语句 (88)
- es6includes (74)
- sqlset (76)
- apt-getinstall-y (100)
- node_modules怎么生成 (87)
- chromepost (71)
- flexdirection (73)
- c++int转char (80)
- mysqlany_value (79)
- static函数和普通函数 (84)
- el-date-picker开始日期早于结束日期 (76)
- js判断是否是json字符串 (75)
- c语言min函数头文件 (77)
- asynccallback (87)
- localstorage.removeitem (74)
- vector线程安全吗 (70)
- java (73)
- js数组插入 (83)
- mac安装java (72)
- 无效的列索引 (74)