cookie记录横向滚动条位置

最新推荐文章于 2022-08-18 10:11:16 发布

转载最新推荐文章于 2022-08-18 10:11:16 发布 · 101 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/qing1304197382/p/10383738.html

本文详细介绍了如何使用CSS和JavaScript实现水平滚动条，并利用Cookie存储滚动位置，确保页面刷新后滚动位置得以保留。通过设置div元素样式和JavaScript函数，实现了滚动位置的实时记录和读取。

一、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.youkuaiyun.com/lwdl123321/article/details/42522677

转载于:https://www.cnblogs.com/qing1304197382/p/10383738.html