canvas画布,在手机端写字应用屏幕会跟着滚动

问题概述:

前几天要写一个手机端的签名插件,网上找来找去都是jquery的signature插件,原理是canvas画布,监听touch事件,pc端好好的,但放在移动端,当手指触屏的时候,页面会跟着滚动,实在是难受至极。

<canvas id="canvas" style="width: 100%;height: 100%"></canvas>

解决办法:

如果页面的一屏的话,即没有滚动条,可以给页面外面包一层div,并将div设置成position: fixed

自此,解决完毕,页面就不滚动了

<div style="display:fixed;width:100%;left:0;top:0;">

<canvas id="canvas" style="width: 100%;height: 100%"></canvas>

</div>

由于我的内容页只有一屏,所以完美的解决了

但如果页面不是一屏的话,目前我想到的方法是在需要canvas画布的地方,做弹层,就是将canvas的部分:position:fixed

这样暂时解决。 问题,其实后面的页面还是会跟着滚动的,虽然不影响canvas的画图

所以这不是很完美的办法,我暂时还没想到更好的,如果路过大神经历过这个问题,恳请留言指点一二,谢谢

 

posted @ 2019-01-16 15:36  颖公子  阅读(1456)  评论(0编辑  收藏  举报