H5 页面布局 - 滚动条限制

太过爱你忘了你带给我的痛 2022-11-27 08:47 200阅读 0赞

**描述：当一个H5页面有头部与尾部的时候，在滑动页面的时候，滚动条会盖在上面，覆盖页面上的所有元素，不大美观，如何做到跟真机一样的效果，直接在指定区域呢？如下图所示进度条区域：**

--------------------

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE2NTU5OTA1_size_16_color_FFFFFF_w_100_h_100_t_70_pic_center]

--------------------

<template>
      <div class="Index">
        <header>标题</header>
        <section class="content">
          <router-link to="/index2">
            <button>下一步</button>
          </router-link>
          <div v-for="v in 200" :key="v">Test { { v}}</div>
        </section>
        <footer class="footer">
          <div>提交</div>
        </footer>
      </div>
    </template>
    <style lang="less" scoped>
    .Index { 
      display: block;
      position: relative;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      position: absolute;
      top: 0;
      bottom: 0;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      width: auto;
      left: 0;
      right: 0;
      margin: 0 auto;
    
      header { 
        height: 50px;
        display: flex;
        border-bottom: 1px solid whitesmoke;
        text-align: center;
        font-size: 20px;
        font-weight: 500;
        line-height: 50px;
        display: block;
        color: #000000;
      }
      .content { 
        height: 100%;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
      }
      footer { 
        display: block;
        text-align: center;
        border-top: 1px solid whitesmoke;
        padding: 7px 0;
        div { 
          width: 90%;
          border-radius: 50px;
          background: green;
          margin: 0 auto;
          height: 40px;
          line-height: 40px;
          color: rgba(255, 255, 255, 1);
          background-color: rgba(57, 122, 255, 1);
          box-shadow: 0px 2px 7px 0px rgba(255, 255, 255, 1);
        }
      }
    }
    </style>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE2NTU5OTA1_size_16_color_FFFFFF_w_100_h_100_t_70_pic_center]: /images/20221124/047342c39a0b4397a4c58b4a15aae6be.png