解决h5移动端布局有垂直滚动条，底部fixed定位元素在IOS下定位失效，跟随滚动条滚动的问题

最新推荐文章于 2023-06-07 17:14:59 发布

神烦大人

最新推荐文章于 2023-06-07 17:14:59 发布

阅读量3.3k

点赞数 1

分类专栏：技术坑文章标签： android ios web app

本文链接：https://blog.csdn.net/lifachang/article/details/108744847

版权

技术坑专栏收录该内容

6 篇文章 0 订阅

订阅专栏

h5移动端经常会有固定在底部的按钮
在这里插入图片描述
这种布局惯用的就是给底部元素fixed定位，然而在IOS下，如果内容很长有滚动条，滚动的时候fixed定位的元素会跟随滚动，特别是当蓝色内容部分有input元素的时候更容易出现跟随滚动的现象，安卓下无此现象。
解决办法：
禁止html滚动，给蓝色框添加滚动条，这样内容就在蓝色框里滚动，红色框absolute定位在底部即可。记得给蓝色框一个padding-bottom高度大于等于红色框高度即可，这样给红色框留出位置，不然最下面的内容会被红色框遮挡。
上代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width">
  <title>Title</title>
  <style>
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    html,body,.main{
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
    .main{
        overflow-y: auto;
        overflow-scrolling: touch;
        padding-bottom: 60px;
    }
    .bottom{
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        height: 60px;
        line-height: 60px;
        background: red;
        color: #fff;
        text-align: center;
    }
    ul,li{
        list-style: none;
    }
    li{
        padding: 60px;
        border-bottom: 5px solid #ececec;
    }
  </style>
</head>
<body>
<div class="main">
  <ul>
    <li>内容1</li>
    <li>内容2</li>
    <li>内容3</li>
    <li>内容4</li>
    <li>内容5</li>
    <li>内容6</li>
    <li>内容7</li>
    <li>内容8</li>
  </ul>
</div>
<div class="bottom">我是底部定位的按钮</div>
</body>
</html>

戳链接看效果
手机扫码看效果
在这里插入图片描述

神烦大人

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
1
评论
解决h5移动端布局有垂直滚动条，底部fixed定位元素在IOS下定位失效，跟随滚动条滚动的问题

h5移动端经常会有固定在底部的按钮这种布局惯用的就是给底部元素fixed定位，然而在IOS下，如果内容很长有滚动条，滚动的时候fixed定位的元素会跟随滚动，特别是当蓝色内容部分有input元素的时候更容易出现跟随滚动的现象，安卓下无此现象。解决办法：禁止html滚动，给蓝色框添加滚动条，这样内容就在蓝色框里滚动，红色框absolute定位在底部即可。记得给蓝色框一个padding-bottom高度大于等于红色框高度即可，这样给红色框留出位置，不然最下面的内容会被红色框遮挡。上代码：<!D
复制链接

扫一扫