一、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. spring整合redis使用RedisTemplate的坑Could not get a resource from the pool

    一.背景 项目中使用spring框架整合redis,使用框架封装的RedisTemplate来实现数据的增删改查,项目上线后,我发现运行一段时间后,会出现异常Could not get a resou ...

  2. Spring AOP 前置通知

    我们使用AspectJ对Spring进行AOP操作,有两种方式,注解和XML配置方式,先在pom.xml中声明jar包 <dependencies> <dependency> ...

  3. OO_第二单元总结

    第二次总结博客(电梯单元) 16071070 陈泽寅 2019.4.20 一:多线程实验初感 这个单元是多线程设计的实践单元,主要让我们运用多线程的原理与思想去完成一个模拟电梯运行的策略.从最开始的单 ...

  4. python3 整数类型PyLongObject 和PyObject源码分析

    python3 整数类型PyLongObject 和PyObject源码分析 一 测试环境介绍和准备 测试环境: 操作系统:windows10 Python版本:3.7.0 下载地址 VS版本:vs2 ...

  5. Python——内置函数

    一.min函数 取当前字符串的最小字符串 s1 = min(strs) 二.max函数 取当前字符串的最大字符串 s1 = max(strs) 三.enumerate函数 函数用于将一个可遍历的数据对 ...

  6. 京东iPad新品开售销量环比增22倍

    一年一度万众期待的 Apple 春季发布会终于在今天凌晨揭晓,Apple 新推的 Apple News.Apple Card.Apple Arcade 和 Apple TV+ 四大软件服务惊喜不断,随 ...

  7. MDK 编译错误和警告 使用时遇到的小问题

    main.c(32): warning:  #1-D: last line of file ends without a newline 这个是由于在main函数的“}”后,没有加回车. 只要在mai ...

  8. Web开发基础-Node.js-01

    01-浏览器工作原理 1)人机交互部分(ui) 2)网络请求部分(socket) 3)javascript引擎 4)渲染引擎(解析html,css) 5)数据存储部分(cookie,本地存储等) -- ...

  9. BUG in Ubuntu--Could not get lock /var/lib/dpkg/lock

    在ubuntu中通过apt安装软件时,报错: E: Could not : Resource temporarily unavailable) E: Unable to lock the admini ...

  10. 利用反射将IDataReader读取到实体类中效率低下的解决办法

    最开始使用反射一个类型的各个属性,对气进行赋值的代码如下: public static List<T> ToList<T>(IDataReader reader) { //实例 ...