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

 

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

  1. asp.net页面刷新或者回发后DIV的滚动条位置不变!(转)

    源文件:http://www.cnblogs.com/nyth/archive/2011/06/10/2077868.html 当把数据放在div里面,然后给div设置Scroll显示,在页面刷新后或 ...

  2. 设置fixed,横向滚动条失效

    window.onscroll = function(){ var sl = -Math.max(document.body.scrollLeft,document.documentElement.s ...

  3. WebStorage记录滚动条位置

    因关注公众号<HTML5学堂>看到这篇文章 "利用本地存储,记录滚动条的位置" ,便好奇敲来试试,然后又看了一些关于WebStorage的资料 附上这篇文章的地址 ht ...

  4. JavaScript实现页面刷新滚动条位置不变(利用cookie)

    实验环境:vs2015 asp.net(C#) 主要原理: 1.在页面滚动时或点击按钮时将当前滚动条位置记录到cookie[pos], 2.页面刷新或重载时查询cookie[pos]中的值是否存在,若 ...

  5. JS实现刷新页面后回到记录时滚动条的位置

    window.onbeforeunload = function () { var scrollPos; if (typeof window.pageYOffset != 'undefined') { ...

  6. table 上下左右 4根线的写法 :before :after 他们就能把td里面右下的那颗线给盖上 还有body和header横向滚动的联动 || 不能把body套在header上是为了上header表头固定 || 还有表头header的右侧overflow-y 是否出现滚动条的位置 记得有一个$nextTick 要不然会获取不到高度 高度就为0了 || 横向滚动条纵向滚动条

    table 上下左右 4根线的写法 <!--* @description 重点查核人员表!--><template> <div class="keyChecke ...

  7. JS利用cookie记录当前位置实现刷新页面后还可以保持菜单栏的展开或闭合

    代码如下,重点是JS部分的代码(部分样式引用的是Bootstrapt中的):   <style> .sidebar-menu .special{ font-size: 16px; marg ...

  8. DataGrid横向滚动条无法拖动的问题

    项目中经常遇到一些问题,这些问题可能很简单,但是之前从未遇到,可能经过了一番谷歌,也可能是查阅了MSDN,或是借鉴了大牛博客,逐渐有了些眉目,为了将这些东西落地,也为了将来之不易的东西记录下来,以备今 ...

  9. js设置滚动条位置

    JS控制滚动条的位置: window.scrollTo(x,y); 竖向滚动条置顶(window.scrollTo(0,0); 竖向滚动条置底 window.scrollTo(0,document.b ...

随机推荐

  1. 图解从 URL 到网页通信原理

    前言 一.文本对话--从请求到响应 二.TCP/IP 协议族介绍 三.基于TCP/IP通信过程 四.TCP建立连接及断开(重点补充) 小结 前言 互联网的原始目的,就是为了传输文本(文本对话).那我们 ...

  2. Apache No installed service named "Apache2.4"的解决办法

    windows安装Apache后,用cmd开启apache服务时,提示No installed service named "Apache2.4" 解决步骤: 1.cmd窗口,进入 ...

  3. spring boot Websocket(使用笔记)

    ​ 使用websocket有两种方式:1是使用sockjs,2是使用h5的标准.使用Html5标准自然更方便简单,所以记录的是配合h5的使用方法. 1.pom ​ 核心是@ServerEndpoint ...

  4. 定时任务调度工作(学习记录 二)timer定时函数的用法

    schedule的四种用法: 1.schedule(task,time) 参数: task----所安排的任务 time----执行任务的时间 作用: 在时间等于或超过time的时候执行且仅执行一次t ...

  5. NOT NULL constraint faile(慢就是快,少即是多)

    在学习数据库orm操作的过程中,遇到一个写不进去数据的问题 在创建数据库进行数据写入时出错,错误信息是 NOT NULL constraint faile(错误信息没有第一时间找到) 数据库,包括表都 ...

  6. python3 while-else和for-else语法

    while-else: while判断条件不成立时,执行else语句: 语法: while 判断条件: 语句1.... else: 语句2.... i初始值为2,i>0成立,则执行while语句 ...

  7. git学习03 - 撤销修改&删除文件

    撤销修改:git checkout -- filename :将工作区文件回到最近一次add 或者 commit的状态 撤销修改分为三种情况: 1.未提交至暂存区 使用git checkout -- ...

  8. 关于objdump的博文整理

    objdump主要用于查看对象文件的内容信息 objdump一些基本命令:http://www.169it.com/article/330129798173630299.html 使用readelf和 ...

  9. Error:java: 无效的目标发行版: 1.8

    出现问题: Error:java: 无效的目标发行版: 1.8 解决方法: file-setting--

  10. linux/ubantu 安装 mysql 并且使其支持远程连接

    前言:打开ubantu的 控制台 或者 远程连接到 ubantu的服务器  其他的 linux 基本类似 可能下载 方式稍微不同 开始吧! [第一步]首先是安装(目前是2019-4-9 默认安装的是 ...