問題概述:
前幾天要寫一個手機端的簽名插件,網上找來找去都是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的畫圖
所以這不是很完美的辦法,我暫時還沒想到更好的,如果路過大神經歷過這個問題,懇請留言指點一二,謝謝