移动web页面支持滚动的方案

一般在写移动端项目的时候，我们一般的布局方案是，需要内容的顶部或者底部是固定的不能移动，但是中间内容可以滑动，那一般你会用什么方法呢？

我们可以分为两个部分，来分析解决问题。

固定内容部分
其余滚动内容部分

固定区域部分

1、绝对定位设置

首先需要给body设置个高度，让body的高度就等于当前设备的高度Html，body{height：100%}，但是又要禁止页面出现滚动，防止内容超出影响body的高，可以给body设置overflow：hidde

固定区域采用绝对对位（为啥不用固定定位？因为对于 ios4 和 android2.2 以下不支持 position:fixed）

2、弹性盒设置

1、首先需要给body设置个高度，让body的高度就等于当前设备的高度Html，body{height：100%}，但是又要禁止页面出现滚动，防止内容超出影响body的高，可以给body设置overflow：hidden

2、给最外层的内容设置弹性盒，主轴为y轴

3、给中间可滑动内容占满剩余空间

其余滚动区域部分

其余滚动区域部分可以用用overflow处理

方案： overflow-y:auto和-webkit-overflow-scrolling: touch
 overflow-y:auto
复制代码

可以使用overflow-y：auto;来设置（overflow-y属性指定或是裁剪内容并且渲染一个滚动条，或是当块级元素在其顶部或底部溢出时显示溢出的内容。）其实简单点说，overflow-y属性就是在垂直方向，有内容溢出的时候,让溢出的内容以滚动条滑动的形式显示。

-webkit-overflow-scrolling: touch

在ios设备中，利用overflow来模拟滚动会出现卡顿的情况，可以通过设置-webkit-overflow-scrolling: touch来解决，原因是设置后ios会为其创建一个UIScrollView，利用硬件来加速渲染。

（Overflow-y:auto 写法在 winphone8 和 android4+ 上有用。ios5+ 版本支持overflow-scrolling 这个属性可以激活平滑滚动，）

所以弹性滚动的兼容写法

   .css{
       overflow:auto;/* winphone8和android4+ */
       -webkit-overflow-scrolling: touch; /* ios5+ */
       }
复制代码

布局一：完整版绝对定位设置

定义页面整体高度为100%，然后使用 position:absolute 布局可解决
中间滚动部分用：overflow-y:auto;和 -webkit-overflow-scrolling: touch解决

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{padding:0;margin:0;}
    html,body{height:100%;}
    .wrap{width:100%;}
    .header,.footer{height:40px;line-height:40px;background-color:#D8D8D8;text-align:center;}
    .header{position: absolute;top:0;left:0;width:100%;}
    .footer{position: absolute;bottom:0;left:0;width:100%;}
    .main{position:absolute;z-index:1;top:40px;left:0;bottom:40px;width:100%;}
    .main{
    Overflow-y:auto;/* winphone8和android4+ */
    -webkit-overflow-scrolling: touch; /* ios5+ */
    }
    .wrap > p{padding: 0 10px;height: 40px;line-height: 40px;border-bottom: 1px solid #ccc;border-top: 1px solid #fff;font-size: 14px;}
</style>
<body>
    <div class="wrap">
        <div class="header">header区域</div>
        <div class="main">
            <div>
                
                <p> iscroll滚动区域，高度自动适应</p>
                <p> iscroll滚动区域，高度自动适应</p>
                <p> iscroll滚动区域，高度自动适应</p>
                <p> iscroll滚动区域，高度自动适应</p>
                <p> iscroll滚动区域，高度自动适应</p>
                <p> iscroll滚动区域，高度自动适应</p>
                <p> iscroll滚动区域，高度自动适应</p>
                <p> iscroll滚动区域，高度自动适应</p>
                <p> iscroll滚动区域，高度自动适应</p>
                <p> iscroll滚动区域，高度自动适应</p>
                <p> iscroll滚动区域，高度自动适应</p>
                <p> iscroll滚动区域，高度自动适应</p>
                <p> iscroll滚动区域，高度自动适应</p>
                <p> iscroll滚动区域，高度自动适应</p>
                <p> iscroll滚动区域，高度自动适应</p>
                <p> iscroll滚动区域，高度自动适应</p>
                <p> iscroll滚动区域，高度自动适应</p>
                <p> iscroll滚动区域，高度自动适应</p>
                <p> iscroll滚动区域，高度自动适应</p>
                <p> iscroll滚动区域，高度自动适应</p>
                <p> iscroll滚动区域，高度自动适应</p>
                <p> iscroll滚动区域，高度自动适应</p>
                <p> iscroll滚动区域，高度自动适应</p>
                <p> iscroll滚动区域，高度自动适应</p>
                <p> iscroll滚动区域，高度自动适应</p>
                <p> iscroll滚动区域，高度自动适应</p>
                <p> iscroll滚动区域，高度自动适应</p>
                <p> iscroll滚动区域，高度自动适应</p>
                <p> iscroll滚动区域，高度自动适应</p>
                <p> iscroll滚动区域，高度自动适应</p>
                <p> iscroll滚动区域，高度自动适应</p>
                <p> iscroll滚动区域，高度自动适应</p>
                <p> iscroll滚动区域，高度自动适应</p>
                <p> iscroll滚动区域，高度自动适应</p>
                <p> iscroll滚动区域，高度自动适应</p>
                <p> iscroll滚动区域，高度自动适应</p>
                <p> iscroll滚动区域，高度自动适应</p>
                <p> iscroll滚动区域，高度自动适应</p>
                <p> iscroll滚动区域，高度自动适应</p>
                <p> iscroll滚动区域，高度自动适应</p>
                <p> iscroll滚动区域，高度自动适应</p>
                <p> iscroll滚动区域，高度自动适应</p>
                <p> iscroll滚动区域，高度自动适应</p>
                <p> iscroll滚动区域，高度自动适应</p>
                <p> iscroll滚动区域，高度自动适应</p>
                <p> iscroll滚动区域，高度自动适应</p>
                <p> iscroll滚动区域，高度自动适应</p>
                <p> iscroll滚动区域，高度自动适应</p>
                <p> iscroll滚动区域，高度自动适应</p>
                <p> iscroll滚动区域，高度自动适应</p>
                <p> iscroll滚动区域，高度自动适应</p>
                <p> iscroll滚动区域，高度自动适应</p>
                <p> iscroll滚动区域，高度自动适应</p>
                <p> iscroll滚动区域，高度自动适应</p>
                <p> iscroll滚动区域，高度自动适应</p>
                <p> iscroll滚动区域，高度自动适应</p>
                <p> iscroll滚动区域，高度自动适应</p>
                <p> iscroll滚动区域，高度自动适应</p>
                <p> iscroll滚动区域，高度自动适应</p>
                <p> iscroll滚动区域，高度自动适应</p>
                <p> iscroll滚动区域，高度自动适应</p>
                <p> iscroll滚动区域，高度自动适应</p>
                <p> iscroll滚动区域，高度自动适应</p>
                <p> iscroll滚动区域，高度自动适应</p>
                <p> iscroll滚动区域，高度自动适应</p>
                <p> iscroll滚动区域，高度自动适应</p>
                <p> iscroll滚动区域，高度自动适应</p>
                <p> iscroll滚动区域，高度自动适应</p>
                <p> iscroll滚动区域，高度自动适应</p>
                <p> iscroll滚动区域，高度自动适应</p>
                <p> iscroll滚动区域，高度自动适应</p>
                <p> iscroll滚动区域，高度自动适应</p>
                <p> iscroll滚动区域，高度自动适应</p>
                <p> iscroll滚动区域，高度自动适应</p>
                <p> iscroll滚动区域，高度自动适应</p>
                <p> iscroll滚动区域，高度自动适应</p>
                <p> iscroll滚动区域，高度自动适应</p>
                <p> iscroll滚动区域，高度自动适应</p>
                <p> iscroll滚动区域，高度自动适应</p>
                <p> iscroll滚动区域，高度自动适应</p>
                <p> iscroll滚动区域，高度自动适应</p>
                <p> iscroll滚动区域，高度自动适应</p>
                <p> iscroll滚动区域，高度自动适应</p>
                <p> iscroll滚动区域，高度自动适应</p>
                <p> iscroll滚动区域，高度自动适应</p>
            </div>
        </div>
        <div class="footer">footer区域</div>
    </div>
</body>
</html>

复制代码

布局二：完整版弹性盒设置

为了更好地兼容性，我们需要新版弹性盒和旧版弹性盒局混合使用（新版弹性盒flex2012年的语法，也将是以后标准的语法，大部分浏览器已经实现了无前缀版本。旧版box-flex是2009年的语法，已经过时，是需要加上对应前缀的。
）
定义页面整体高度为100%，给最外层容器设置弹性盒，需要用到的属性

flex：定义布局为盒模型属性
box-orient:vertical：盒模型垂直布局
box-flex:1 子元素占据剩余的空间
flex-align-center：子元素垂直居中
flex-pack-center：子元素水平居中
flex-pack-justify：子元素两端对齐
兼容性：ios 4+、android 2.3+、winphone8+

中间滚动部分用：overflow-y:auto;和 -webkit-overflow-scrolling: touch解决

代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>flex上下固定中间滚动布局</title>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
<style type="text/css">
*{padding: 0;margin: 0;}
html,body{height: 100%}
.wrap{width: 100%;height: 100%;}
.header,.footer{height:40px;line-height:40px;background-color:#D8D8D8;}
.main{overflow:auto;-webkit-overflow-scrolling: touch;}
.flex{
    /* 都是设置弹性布局 */
    display:-webkit-box; /*兼容谷歌 Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
    display:-webkit-flex;/*兼容谷歌 Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
    display:-ms-flexbox; /* IE 10 */
    display:flex;/* 兼容Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */
    }
.flex-v{
    /* 设置盒模型垂直布局，设置前缀的兼容性同上 */
    -webkit-box-orient:vertical;
    -webkit-flex-direction:column;
    -ms-flex-direction:column;flex-direction:column;
    }
.flex-1{
    /* 设置子元素占据剩余的空间，设置前缀的兼容性同上 */
    -webkit-box-flex:1;
    -webkit-flex:1;
    -ms-flex:1;flex:1;
    }
.flex-align-center{
    /* 设置子元素垂直居中，设置前缀的兼容性同上 */
    -webkit-box-align:center;
    -webkit-align-items:center;
    -ms-flex-align:center;align-items:center;
    }
.flex-pack-center{
    /* 设置子元素水平居中，设置前缀的兼容性同上 */
    -webkit-box-pack:center;
    -webkit-justify-content:center;
    -ms-flex-pack:center;
    justify-content:center;
    }
.flex-pack-justify{
    /* 子元素两端对齐，设置前缀的兼容性同上  */
    -webkit-box-pack:justify;
    -webkit-justify-content:
    space-between;-ms-flex-pack:justify;
    justify-content:space-between;
    }
</style>
</head>
<body>
<div class="wrap flex flex-v">
<div class="header">我想要它固定顶部部</div>
    <div class="main flex-1">
      <p>高度自动适应</p>
      <p>高度自动适应</p>
      <p>高度自动适应</p>
      <p>高度自动适应</p>
      <p>高度自动适应</p>
      <p>高度自动适应</p>
      <p>高度自动适应</p>
      <p>高度自动适应</p>
      <p>高度自动适应</p>
      <p>高度自动适应</p>
      <p>高度自动适应</p>
      <p>高度自动适应</p>
      <p>高度自动适应</p>
      <p>高度自动适应</p>
      <p>高度自动适应</p>
      <p>高度自动适应</p>
      <p>高度自动适应</p>
      <p>高度自动适应</p>
      <p>高度自动适应</p>
      <p>高度自动适应</p>
      <p>高度自动适应</p>
      <p>高度自动适应</p>
      <p>高度自动适应</p>
      <p>高度自动适应</p>
      <p>高度自动适应</p>
      <p>高度自动适应</p>
      <p>高度自动适应</p>
      <p>高度自动适应</p>
      <p>高度自动适应</p>
    </div>
    <div class="footer">我想要它固定底部</div>
</div>

</body>
</html>

复制代码

滚动条优化部分

如果直接设置overflow-y:scroll在ios下始终会出现很丑的滚动条，我们可以对该元素设置以下属性：

margin-right: -20px;
padding-right: 20px;
复制代码

对滚动条进行一个小小的hack，它就再也不会出现了，用户交互时会有和原生滚动一样的感觉，体验更佳。
设置webkit浏览器的私有属性::-webkit-scrollbar能更灵活的控制滚动条，在此感谢。如果只需要隐藏，如下代码即可：

::-webkit-scrollbar{
display: none
}

复制代码

虽然移动端的浏览器webkit内核居多，不过还是要在真机测试后再得出结论，如果有些浏览器不支持这个属性的话，依然可以使用上面的小hack。

文章版权归作者所有，未经允许请勿转载。

THE END

前端

Hadoop伪集群环境搭建笔记

徒手撸一个 utools 系列（二）

Stellio player 5.9.3 本地音乐播放器

Konstanty_Bialkowski libmodplug ‘src/load_med.cpp’整数溢出漏洞

小皮影视 v3.0.4万能版/解除付费破解多个视频源简洁无广告

Opentools Attachment Mod多个远程漏洞

移动web页面支持滚动的方案

移动web页面支持滚动的方案

固定区域部分

其余滚动区域部分

-webkit-overflow-scrolling: touch

布局一：完整版绝对定位设置

代码

布局二：完整版弹性盒设置

滚动条优化部分

Hadoop伪集群环境搭建笔记

徒手撸一个 utools 系列（二）

Stellio player 5.9.3 本地音乐播放器

Konstanty_Bialkowski libmodplug ‘src/load_med.cpp’整数溢出漏洞

小皮影视 v3.0.4万能版/解除付费 破解多个视频源 简洁无广告

Opentools Attachment Mod多个远程漏洞

移动web页面支持滚动的方案

移动web页面支持滚动的方案

固定区域部分

其余滚动区域部分

-webkit-overflow-scrolling: touch

布局一：完整版绝对定位设置

代码

布局二：完整版弹性盒设置

滚动条优化部分

小皮影视 v3.0.4万能版/解除付费破解多个视频源简洁无广告