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