[Html]解决微信浏览器内scrollTop失效问题

问题

scrollTop在其他浏览器读取正常,通过 JQueryanimate()方法能滑动到指定位置,微信开发者工具也正常,然而在微信浏览器内失效。

解决过程

1.原先我以为可能是浏览器不支持某个语法,但是通过调试发现函数前后都可以执行,分别跳出1和2,那么不存在语法报错问题,

//原函数
function scrollBtn(){
    alert(1)    //通过alert来调试验证执行是否报错
    $('#footer') && $("html,body").animate({"scrollTop":$("#footer")[0].offsetTop},500)   //判断DOM对象并执行滑动到指定位置效果
    alert(2)    
}

2.测试是否是因为scrollTop的问题,发现页面无论滑动至何处始终为0

function scrollBtn(){
    var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
    alert(scrollTop)    //通过alert来调试验证执行是否报错
    $('#footer') && $("html,body").animate({"scrollTop":$("#footer")[0].offsetTop},200)   //判断DOM对象并执行滑动到指定位置效果
    alert(2)    
}

3.既然是scrollTop的问题,经查找资料得知,scrollTop需要子div空间超出父div空间才可以,即 $('#father').height()>$('#children').height(),所以scrollTop不会生效,那么我们开始改造html代码!

方案一:

html,body{
        padding:0;
        margin:0;
        overflow: auto;
        height:auto;
        width:100%;
    }

可以最快解决scrollTop失效问题。但是获取和屏幕尺寸相同的容器时比较麻烦,所以我研究了第二种方案。

方案二:



    
    

    
Hello World!

使用div将内容再次进行包裹,把

当做是来看,内部DOM对象将通过样式overflow:auto实现溢出的内容滚动,和
同级并使用match样式能保证适用容器和屏幕的宽高一致



    
    

    
Hello World!

以上内容作者原创,未经作者同意禁止转载。

你可能感兴趣的:(html5,css,jquery,微信浏览器)