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

问题

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

解决过程

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失效问题。但是获取和屏幕尺寸相同的容器时比较麻烦，所以我研究了第二种方案。

方案二：

<!-- new code -->
<html>
    <!-- ... -->
    <style>
    html,body{
        padding:0;
        margin:0;
        overflow:hidden;
        height:100%;
        width:100%;
    }
    .match{
        width:100%;
        height:100%;
    }
    .w-match{
        width:100%;
    }
    #container{
        width:100%;
        height:100%;
        overflow:auto;
    }
    </style>
<body>
    <div id="container">
        <div class="match">
            <div id="header" class="w-match">
                Here is Header...
            </div>
            <div id="main" class="match">
                <!-- 假设这里的内容超出屏幕的高度 -->
                <button onclick="scrollBtn()">Go Footer!</button>
                <div style="height:3000px;">Hello World!</div>
            </div>
            <div id="footer" class="w-match">
                <div style="">this is Footer</div>
            </div>
        </div>
    </div>
</body>
<script>
    function scrollBtn(){
        $("#footer") && $('#container').animate({scrollTop:$("#footer")[0].offsetTop},500)
    }
</script>
</html>

使用div将内容再次进行包裹，把<div id=”container“>当做是<body>来看，内部DOM对象将通过样式overflow:auto实现溢出的内容滚动，和<div id=”main“>同级并使用match样式能保证适用容器和屏幕的宽高一致

<!-- 改造前的代码 -->
<html>
    <!-- ... -->
    <style>
    html, body {
        margin: 0;
        height: 100%;
        width:100%;
        overflow: hidden;
    }
    .match{
        width:100%;
        height:100%;
    }
    .w-match{
        width:100%;
    }
    </style>
<body>
    <div class="match">
            <div id="header" class="w-match">
                Here is Header...
            </div>
            <div id="main" class="match">
                <!-- 假设这里的内容超出屏幕的高度 -->
                <button onclick="scrollBtn()">Go Footer!</button>
                <div style="height:3000px;">Hello World!</div>
            </div>
            <div id="footer" class="w-match">
                <div style="">this is Footer</div>
            </div>
        </div>
</body>
<script>
    function scrollBtn(){
        $("#footer") && $('html,body').animate({scrollTop:$("#footer")[0].offsetTop},500)
    }
</script>
</html>

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

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

问题

解决过程

泉州牧码人

引用和评论

Nginx出现500 Internal Server Error 错误的解决方案

CSS团队协作规范

前端开发工具

开发插件集合

JS校验身份证号

Jerry和您聊聊Chrome开发者工具

CSS 如何模拟“真实的”进度条？