一、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. 2D-2D:对极几何 基础矩阵F 本质矩阵E 单应矩阵H

    对极约束 \[ \boldsymbol{x}_{2}^{T} \boldsymbol{F} \boldsymbol{x}_{1}=\boldsymbol{0} \quad \hat{\boldsymb ...

  2. Linux切换为超级用户的命令

    问题描述 使用vi编辑器写好内容后保存并退出时遇到以下问题 解决方案 该问题的原因是用户权限不够,因为普通用户用 vi 不能保存文件,需要使用超级用户才可以. 先转换为超级用户:su 再用vi打开文件 ...

  3. feign多文件上传

    参考地址:https://www.cnblogs.com/standup/p/9090113.html https://www.cnblogs.com/standup/p/9093753.html 1 ...

  4. a标签 download base64 下载 网络失败

    使用html2canvas 生成尺寸较大 base64 后进行 a标签  download 下载 ,浏览器报网络失败错误 通过谷歌搜索 发现原因是 因为截取尺寸较大  导致生成base64 长度太大 ...

  5. Spring MVC 使用介绍(十五)数据验证 (二)依赖注入与方法级别验证

    一.概述 JSR-349 (Bean Validation 1.1)对数据验证进一步进行的规范,主要内容如下: 1.依赖注入验证 2.方法级别验证 二.依赖注入验证 spring提供BeanValid ...

  6. 【BZOJ4001】[TJOI2015]概率论(生成函数)

    [BZOJ4001][TJOI2015]概率论(生成函数) 题面 BZOJ 洛谷 题解 这题好仙啊.... 设\(g_n\)表示\(n\)个点的二叉树个数,\(f_n\)表示\(n\)个点的二叉树的叶 ...

  7. linux的/etc/profile、~/.profile、~/.bashrc、~./bash_profile这几个配置文件

    在添加环境变量的时候,我们会去修改配置文件 如果留意过,网上博文,有些在/etc/profile文件中配置的,有些是在~./bash_profile文件中配置的,等等 那么,/etc/profile. ...

  8. Celery

    在程序的运行过程中,我们经常会碰到一些耗时耗资源的操作,为了避免它们阻塞主程序的运行,我们经常会采用多线程或异步任务.比如,在 Web 开发中,对新用户的注册,我们通常会给他发一封激活邮件,而发邮件是 ...

  9. Linux-KVM虚拟化

    kvm安装 1.在宿主机上准备好yum(只需要本地镜像yum就可以) 2.查看CPU是否支持inter或AMD的虚拟技术 # cat /proc/cpuinfo |grep -E "vmx| ...

  10. ML笔记-sklearn.classification_report

    主要用于显示主要分类指标的文本报告,在报告中显示每个类的精确度.召回率.F1等信息 首先数据测试结果分为以下4种情况: TP:预测为正,实现为正 FP:预测为正,实现为负 FN:预测为负,实现为正 T ...