一、Css
<style type="text/css"> #x{ 100%; white-space: nowrap; overflow-x: scroll; overflow-y: hidden; -webkit-backface-visibility: hidden; -webkit-perspective: 1000; -webkit-overflow-scrolling: touch; text-align: justify; box-sizing: border-box; } #x p{ 50px; display: inline-block; } </style>
二、div
<div id="x" style="" onscroll="SetW(this)"> <p>a</p> <p>a</p> <p>a</p> <p>a</p> <p>a</p> <p>a</p> <p>a</p> <p>a</p> <p>a</p> <p>a</p> <p>a</p> <p>a</p> <p>a</p> <p>a</p> <p>a</p> <p>a</p> <p>a</p> <p>a</p> <p>a</p> <p>a</p> <p>a</p> <p>a</p> <p>a</p> <p>a</p> <p>a</p> <p>a</p> <p>a</p> <p>a</p> <p>a</p> <p>a</p> <p>a</p> <p>a</p> <p>a</p> <p>a</p> <p>a</p> <p>a</p> <p>a</p> <p>a</p> <p>a</p> <p>a</p> <p>a</p> <p>a</p> <p>a</p> <p>a</p> <p>a</p> <p>a</p> <p>a</p> <p>a</p> <p>a</p> <p>a</p> </div>
三、JavaScript 引用jQuery.js<script>
var _w = 0;
function SetW(o)
{
_w = o.scrollLeft;
SetCookie("a",_w);
console.log(_w)
}
window.onload = function(){ document.getElementById("x").scrollLeft = GetCookie("a");}
function SetCookie(sName, sValue){
document.cookie = sName + "=" + escape(sValue) + "; ";
}
function GetCookie(sName){
var aCookie = document.cookie.split("; ");
console.log(aCookie.length)
for (var i=0; i < aCookie.length; i++) {
var aCrumb=aCookie[i].split("=");
if (sName == aCrumb[0])
return unescape(aCrumb[1]);
}
return 0;
}
</script>
四、
cookie记录竖向滚动条位置 参考https://blog.csdn.net/lwdl123321/article/details/42522677