javascript - 怎样在移动端的导航栏布局上解决通常position:fixed;写法带来在出现虚拟键盘时产生的bug
黄舟
黄舟 2017-04-11 12:08:33
0
2
256

之前用了 iscrool.js 来解决这个问题,但是我突然又觉得单为了这么个问题而专门引用个框架,有点“大动干戈”,不知各位有什么好方法?

黄舟
黄舟

人生最曼妙的风景,竟是内心的淡定与从容!

全員に返信 (2)
PHPzhong

楼主可以参考这篇博客:Web移动端Fixed布局的解决方案

いいねを押す+0
    巴扎黑

    其他的我还太清楚,我自己一般是这样处理的:通过absolute代替fixed。如果还有软键盘遮盖掉了输入框,那么可以用一下下面的这个方法。输入框获取焦点后,手动的调整滚动条的位置。参考代码如下(我用到了zepto/jquery):

     $("input").focus(function(){ //获取值 var makeDo = $(this).attr("data-make"); //事件适配器 var doSomething = { "doScroll":changeInputScroll }; if ( makeDo && doSomething.hasOwnProperty(makeDo) ) { doSomething[makeDo]($(this),$("#mainCon")); } }); //获取焦点的时候,动态的改变滚动条的位置 function changeInputScroll($input,$con){ var viewTop = $con[0].scrollTop,//当前的滚动条高度 viewBottom = viewTop + $con[0].innerHeight,//当前容器的高度 viewShowTop = $con.offset().top;//当前视口的位置 var elementTop = $input.offset().top, //当前对象,在页面中的位置 elementBottom = elementTop + $input.height() - viewShowTop;//要移动的距离 //设置滚动条位置 $con.scrollTop(elementBottom); }
    いいねを押す+0
      最新のダウンロード
      詳細>
      ウェブエフェクト
      公式サイト
      サイト素材
      フロントエンドテンプレート
      私たちについて 免責事項 Sitemap
      PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!