1. 程式人生 > >中間部分滾動記錄div內滾動條的位置, 以及將頁面分為三部分組成解決position:fixed在ios下失效問題

中間部分滾動記錄div內滾動條的位置, 以及將頁面分為三部分組成解決position:fixed在ios下失效問題

https://www.cnblogs.com/edisoner/p/6006804.html

將上一個頁面的div的scrolltop距離長度記錄在cookie中,然後通過js調整重新整理頁面時的長度記錄

<div id="x" style="height: 200px; overflow: scroll" onscroll="SetH(this)">
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
<p>1</p> <p>1</p> <p>1</p> <p>1</p>
           <p>1</p>
           <p>1</p>
 </div>

<script>
        var _h = 0;
        function SetH(o) {
            _h = o.scrollTop
            SetCookie(
"a", _h) } window.onload = function () { document.getElementById("x").scrollTop = GetCookie("a");//頁面載入時設定scrolltop高度 } function SetCookie(sName, sValue) { document.cookie = sName + "=" + escape(sValue) + "; "; } function GetCookie(sName) {
var aCookie = document.cookie.split("; "); for (var i = 0; i < aCookie.length; i++) { var aCrumb = aCookie[i].split("="); if (sName == aCrumb[0]) return unescape(aCrumb[1]); } return 0; } </script>


https://segmentfault.com/q/1010000007949621

https://www.2cto.com/kf/201801/712763.html

https://segmentfault.com/q/1010000012344298/a-1020000012348109

<template>
  <div class="scroll">
    <div class="scroll-div-outer" id='scrollDiv'>
      <div class="scroll-div-inner">
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'scroll',
  methods:{
    checkDivScroolTop(){
      //獲取節點
      var scrollDiv = document.getElementById('scrollDiv');
      //繫結事件
      scrollDiv.addEventListener('scroll', function() {
        console.log(scrollDiv.scrollTop);
      });
    }
  },
  mounted(){
    this.checkDivScroolTop();
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .scroll-div-outer{
    height: 200px;
    width: 200px;
    border: 1px solid #ccc;
    overflow: auto;
  }

   .scroll-div-inner{
    height: 600px;
    width: 200px;
    border: 1px solid #ccc;
  }
</style>

<div class="app-wrap">
  <div class="header">Header</div>
  <div class="app-main-Wrap"  id="mainPageBody">
  <div id="mainPage" class="mainpage-body" :style="{'-webkit-overflow-scrolling': scrollMode}" v-if="showNetwork" >
    <v-loadmore :top-method="loadTop" :auto-fill="false" ref="loadmore" >
        <questionList :fromPage="fromPage" :questionList="questionList" v-infinite-scroll="more"
infinite-scroll-disabled="loading"
infinite-scroll-distance="10"
infinite-scroll-immediate-check="false">
        </questionList>
    </v-loadmore>
    <div class="allQuesLoad" v-if="allLoaded">
全部載入完成
    </div>
  </div>
 </div>
 <div class="foot">footer</div>
</div>
.app-wrap{
  height:100%;
}
.header {
  position: fixed;
width: 100%;
top: 0;
left:0;
z-index: 1000;
border-bottom:1px solid #eee;
}
.foot{
  position:fixed;
left:0;
bottom:0;
height:0px;
line-height:0px;
width:100%;
display:none;
}

.app-main-Wrap {
  position:fixed;
top:100px;
bottom:0px;
width:100%;
overflow:scroll;
-webkit-overflow-scrolling: touch;
}

activated () {
  var scrollDiv = document.getElementById('mainPageBody')
  scrollDiv.addEventListener('scroll', this.recordScrollPosition)
  if (!this.$route.meta.isBack || this.isFirstEnter) {
    scrollDiv.scrollTop = 0
  } else if (this.$route.meta.isBack) {
  scrollDiv.scrollTop = localStorage.scrollDivTop
 }
methods: {
  recordScrollPosition: function (e) {
    localStorage.scrollDivTop = e.target.scrollTop
},
  toMineClick: function () {  var scrollDiv = document.getElementById('mainPageBody')
  scrollDiv.removeEventListener('scroll', this.recordScrollPosition) },