?t=1315462873338) no-repeat -6px -3pxdisplay:blockwidth:79pxheight:33pxtext-indent:-9999px}a:hover{background-position:-87px -3px}登陆
不想让按钮遮住内容的话,可以给内容这层div添加如:margin-bottom
:100px
或者
padding-bottom:100px,这个像素值>=按钮
栏的高度
背景: 最近做的页面原本有一个点赞悬浮按钮,但是在不同分辨率的移动设备屏幕上,后边的文字显示位置不固定,有的会被悬浮按钮挡住。所以加了一个拖拽功能。
参考解决办法: 狗尾草-Vue拖拽组件
遇到问题及解决:
1.unable to preventDefault inside passive event listener due to taeget being treated as passive
原因是为了滚动顺滑,touchmove等事件会被浏览器默认设置为passive:true,需要手动设置成false。参考: Unable to preventDefault inside passive event listener 。文中提到的两种办法,第一种可以,第二种css办法试了无效(可能是设置的位置不对?)
2.拖拽之后,被拖拽的组件大小会改变
我是只需要y轴拖拽,拖拽后空间的高度改变了,拖过的路径都变成了div的高度,再点击之前组件挡住的地方,会出现点击到组件的效果。解决办法是设置组件height属性。
3.设置tansition后拖拽“不动”
网上看的一个例子里边加了transition,可能是想让效果平滑一些,但是却有一种拖不动的感觉。当时以为是拖拽功能实现的有问题,于是删了换了上边链接里的方法,拖拽get√。然后试着加了一下transition,又出现了阻塞。所以这里应该是不适合用transition属性的,而且不用也挺平滑的。
学习总结:
拖拽功能的实现,主要是通过监听鼠标事件,计算各种数值,不断调整组件的位置。因此,需要复习的知识点是鼠标事件,各种尺寸数据及之间的关系。存在的不足是,虽然发现了问题并解决了,但还是不知道问题原理层面的原因。知其然,不知其所以然,希望之后能把这块补充起来。