css滚动相关问题记录

1） 关于滑动加速优化，可以通过css进行处理

例如，html如下：

<div class="content-dialog">
        <h1>活动规则</h1>
        <div class="content" id="content" v-bind:style="{ 'height': contentHeight + 'px' }">
        <div class="j-title">活动时间
          <div class="spText">{{data.time}}</div>
        </div>
        <div class="j-title">活动内容
          <div class="spText">{{data.content}}</div>
        </div>
         <div class="j-title">参与方式
          <div class="rule-content spText">
            <p v-for="item in data.method">
              <span>{{item.index}}</span>{{item.title}}
            </p>
          </div>
        </div>
        <div class="j-title">活动规则
          <div class="rule-content spText">
            <p v-for="item in data.list">
              <span>{{item.index}}</span>{{item.title}}
            </p>
          </div>
        </div>
        </div>
    </div>

以上滑动区域为id="content"的区域，对应的css设置为：

.content-dialog {
    position: absolute;
    width: 80%;
    margin-left: 10%;
    overflow-scrolling: touch;
    -webkit-overflow-scrolling: touch;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    overflow: hidden;
  }

以上粗体则为css加速器的代码

 

2） 计算手机屏幕的高度

let height = window.innerHeight || (window.document.documentElement.clientHeight || window.document.body.clientHeight);

 

3）关于弹框滚动条重置问题

    点击页面上的某个按钮，弹出框，当弹出框的内容较多时，会有滚动条，滚动到最底部，点击关闭，然后当再次弹出框时，

   滚动条会默认定位到上次浏览到地方，怎么才能让滚动条回到顶部？

   通过设置scrollTop进行处理，在点击关闭的事件中，添加如下代码：

  document.querySelector('#content').scrollTop = 0