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

码农天地 - 2021-01-12 02:26:36

问题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 >
            <div id="header" >
                Here is Header...
            </div>
            <div id="main" >
                <!-- 假设这里的内容超出屏幕的高度 -->
                <button onclick="scrollBtn()">Go Footer!</button>
                <div >Hello World!</div>
            </div>
            <div id="footer" >
                <div >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 >
            <div id="header" >
                Here is Header...
            </div>
            <div id="main" >
                <!-- 假设这里的内容超出屏幕的高度 -->
                <button onclick="scrollBtn()">Go Footer!</button>
                <div >Hello World!</div>
            </div>
            <div id="footer" >
                <div >this is Footer</div>
            </div>
        </div>
</body>
<script>
    function scrollBtn(){
        $("#footer") && $('html,body').animate({scrollTop:$("#footer")[0].offsetTop},500)
    }
</script>
</html>

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

特别申明：本文内容来源网络，版权归原作者所有，如有侵权请立即与我们联系（cy198701067573@163.com），我们将及时处理。

上一篇：这款漂亮的Vue3.0后台管理系统模板，我粉了

下一篇： Web发展中通信的方式有哪些呢？

Tags 标签

加个好友，技术交流

码农天地

首页 HTML/CSS WEB服务器 PHP Linux 数据库异常报错插件工具美文欣赏站长直荐