cookie记录横向滚动条位置

一、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

 

原文地址:https://www.cnblogs.com/qing1304197382/p/10383738.html

时间: 2024-11-04 14:40:40

cookie记录横向滚动条位置的相关文章

利用cookie记录div之前位置

cookie除了能用来存储用户名,密码等数据外还可以用来记录div之前的位置. 先上个布局 <div id="div1" style></div> #div1{ width: 100px; height: 100px; background: red; position: absolute; } 这里先说下拖拽的大体原理,将物体拖到新的位置可以通过改变left和top实现. 在将div从位置1移动到div2的过程中,不变的是鼠标在div中的位置.因此我们让鼠标在

WebStorage记录滚动条位置

因关注公众号<HTML5学堂>看到这篇文章 "利用本地存储,记录滚动条的位置" ,便好奇敲来试试,然后又看了一些关于WebStorage的资料 附上这篇文章的地址 https://mp.weixin.qq.com/s/z34GRUZvDU2hCbH6Kc_ZDA 与大家共勉. 在网上搜了一些记录滚动条位置的文章,大多是用cookie来记录,下边我就自己看到的资料与大家分析cookie与webstorage的区别.   优点 缺点 应用场景 Cookie 简单易用 安全性差,

table左边固定-底部横向滚动条

是日有需求,曾探讨过table表单头部.尾部固定不动,中间内容随着滚动条的滚动而变化. 整合资料之际,发现有很多表格,表单展现中,横向数据很多.很长,不方便查看. 则,横空霹雳出了,此款:table表单左边固定,底部滚动条左右滑动展现数据demo. 原理很简单:在 table外面嵌套一层div ,并且设置此父div {overflow: auto;}.此举为了出席横向滚动条 对里面的tr设置{position: relative;}相对定位 对tr里面的第一个td设置fixed .fixed {

发掘ListBox的潜力(一):自动调整横向滚动条宽度

<自绘ListBox的两种效果>一文帖出之后,从反馈信息来看,大家对这种小技巧还是很认同.接下来我将继续围绕ListBox写一系列的文章,进一步发掘ListBox的潜力,其中包括:自动调整横向滚动条宽度.即时提示(Tips).拖放插入点提示等,并在最后制作一个在滚动区内的ListBox组. 自动调整横向滚动条宽度 网上可以找到很多让Listbox产生横向滚动条的文章,其中的方法基本一样,就是定义一个函数,遍历Items取得最大的TextWidth值,然后发Listbox发消息LB_SETHOR

页面刷新滚动条位置不变

今天因为这个问题困扰了很久网上的例子都尝试没效果,后来发现一点原来是内容最外层没有div的原因 1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="SpotChkDetail.aspx.cs" Inherits="Topevery.DUM.Web.Observer.SpotChkDetail" %> 2 3 <script runat=&qu

IE6下出现横向滚动条问题的解决方案

当我们在css样式设置为html {overflow-y:auto;}时,在ie7以上版本应用时不会有问题,可是在ie6下就会发现垂直滚动条出现会引起横向滚动条出现.究其原因是在ie6下,当内容过多出现垂直滚动条时,此时页面的宽度为其本来宽度加上滚动条的宽度,导致页面宽度超过100%,而出现横向滚动条,在ie7+浏览器中,会自动的识别滚动条,页面宽度为内容的宽度加上滚动条的宽度等于100%,而不会出现滚动条,这相当于是ie的滚动条bug(纯属个人见解,不对的地方还请指出,共同学习交流). 解决上

WPF,解决Listbox,按住ListboxItem向下拖出Listbox,横向滚动条跑到最后。

类似这种样式的控件,.,在横向滚动条隐藏的情况下有这样的问题.(横向滚动条显示的时候也会,,目前不知道怎么解决.) 因为这个控件偏移是利用ListBox的ItemsPanelTemplate模版里的StackPanel的宽度通过设置"(UIElement.RenderTransform).(TranslateTransform.X)"来偏移到指定位置. 所以的横向滚动条必须在最前面不能动,不然便宜位置会出错. 如图按住4,按住鼠标向下移动出ListBox,滚动条会自动跑到最后. 解决方

css之超出部分不换行且显示横向滚动条

我不是专业前端,所以折腾了老半天啊QAQ 需求是两个div,内层div不换行且超出时外层div显示横向滚动条 类似以下这种: 刚开始的代码如下: <div class="nowrap"> <div class="item-t"></div> <div class="item-t"></div> <div class="item-t"></div>

移动端禁用横向滚动条

在用bootstrap制作移动开发的时候,发现宽度并未超过屏幕宽度时,依然出现横向滚动条. 问题解决: 1.查看是否在head里面加入 /*等比例缩放*/<meta name="viewport" content="width=device-width, initial-scale=1.0">/*禁止缩放*/<meta name="viewport" content="initial-scale=1, maximum-