cookie记录横向滚动条位置

Posted 2021-02-09 qing1304197382

一、Css 

<style type="text/css">
		#x{
			width: 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{
			width: 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