中間部分滾動記錄div內滾動條的位置, 以及將頁面分為三部分組成解決position:fixed在ios下失效問題
阿新 • • 發佈:2019-01-31
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) },