想让DIV层滚动条显示在顶端，CSS样式没找到相关属性，于是用2个DIV层来模拟做了一个。
经测试IE浏览器上显示并不太美观！不知道是否还有更好的办法可以实现这功能呢？

 
aaaaaaasssssssdddddddfffffffgggggggghhhhhhhhhjjjjjjjjkkkkkkkkllllllllll
aaaaaaasssssssdddddddfffffffgggggggghhhhhhhhhjjjjjjjjkkkkkkkkllllllllll
aaaaaaasssssssdddddddfffffffgggggggghhhhhhhhhjjjjjjjjkkkkkkkkllllllllll
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(function () {

            $("#div2").css("overflow-x", "scroll").height().width($("#div1").width()+); //设置一个高度10的DIV2层 长度与DIV1层一致

            $("#div2").html($("#div1").html()); //并给DIV2层填充内容

            $("#div2").scroll(function () {

                $("#div1")[].scrollLeft = $("#div2")[].scrollLeft; //拉动DIV2层滚动条，DIV1层滚动条同步被改变

            });

        });

    </script>

</head>

<body>

<p></p>

<div id="div2"></div>

<div id="div1" style="border-style: solid; border-width: 1px; border-color: inherit; width:150px; height:120px; overflow-x:scroll; ">

aaaaaaasssssssdddddddfffffffgggggggghhhhhhhhhjjjjjjjjkkkkkkkkllllllllll<br />

aaaaaaasssssssdddddddfffffffgggggggghhhhhhhhhjjjjjjjjkkkkkkkkllllllllll<br />

aaaaaaasssssssdddddddfffffffgggggggghhhhhhhhhjjjjjjjjkkkkkkkkllllllllll<br />

</div>

</body>

</html>

JQuery Div层滚动条控制（模拟横向滚动条在最顶端显示）的更多相关文章

  1. 关于如何用Jquery监听鼠标滚轮改变横向滚动条

    $(function(){ if ((navigator.userAgent.indexOf('MSIE') >= 0)){/*判断是否是IE浏览器*/ var scroll_width = 1 ...

  2. jquery横向滚动条

    此代码献给wendy 由于工作太忙,下次再整理成插件调用,先记录下来,欢迎同学们提意见. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tr ...

  3. 页面固定DIV层CSS代码

    有时候为了用户体验更好些,网页设计师会把网站导航放在一个固定的DIV层里面,不随滚动条滚动.本方法是利用CSS,position:fixed属性来固定层,fixed是特殊的absolute,即fixe ...

  4. 【转】selenium技巧 - 通过js来控制滚动条，通过xpath定位最上层的div层

    http://blog.csdn.net/iceryan/article/details/8162703 业务流程:   1.打开此网页 http://nanjing.xiaomishu.com/sh ...

  5. 自定义滚动条——控制div的大小和透明度

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #2b7ec3 } p.p2 { margin: 0.0px ...

  6. 1.横向滚动条,要设置两个div包裹. 2. 点击切换视频或者图片. overflow . overflow-x

    1.横向滚动条. div.1 > div.2 > img img  img 第一: 设置 div.1 一个固定的宽度 和高度  . 例如宽度 700px;  高度是 120px; 设置 o ...

  7. js div模拟水平滚动条

    这个也是我百度到的,但是忘记保存连接了,现在把代码贴上来,有需要的可以参考一下: <!DOCTYPE html> <html> <head> <meta ch ...

  8. DataTables固定表格宽度（设置横向滚动条）

    当表格的列比较多的时候,可能就需要固定表格的宽度了,默认的100%宽已经不适应了.默认的100%宽要实现改变窗口大小也100%的话,在table元素上添加width="100%", ...

  9. 网页出现横向滚动条的原因可能是使用bootstrap不当引起

    Bootstrap的栅格布局超级方便我们写网页.但是在不是全体配合使用的情况下,会出现横向滚动条的现象. 什么叫不是配合使用的情况呢? >>一种情况是:你使用了row作为你的第一层父元素: ...

随机推荐

  1. Power Network - poj 1459 (最大流 Edmonds-Karp算法)

      Time Limit: 2000MS   Memory Limit: 32768K Total Submissions: 24788   Accepted: 12922 Description A ...

  2. Linux 文件管理（C语言库函数一）

    系统调用函数能够直接操作系统设备,C语言库函数是对系统调用函数的封装,增加了可移植性, C语言库函数可以在各个系统上运行,而系统调用则会因为系统不同而有一定的差别. 在读写文件这个操作上,系统函数每次 ...

  3. snap方式nextcloud安装笔记

    官方安装文档:https://docs.nextcloud.com/server/12/admin_manual/installation/source_installation.html#examp ...

  4. POJ 1815 Friendship(最小割)

    http://poj.org/problem? id=1815 Friendship Time Limit: 2000MS   Memory Limit: 20000K Total Submissio ...

  5. python静态网页爬虫之xpath

    常用语句: 1.starts-with(@属性名称,属性字符相同部分)使用情形: 以相同的字符开头 <div id = 'test-1'>需要的内容1</div> <di ...

  6. go反射----1类型

    声明:文章内容取自雨痕老师<Go语言学习笔记> 反射( reflect )让我们能在运行期探知对象的类型信息和内存结构,这从一定程度上弥补了静态语言在动态行为上的不足.同时,反射还是元编程 ...

  7. 现代 PHP 新特性系列

    生成器的创建和使用 http://laravelacademy.org/post/4317.html

  8. iOS提交到appstore的新要求

    本文转载至http://blog.csdn.net/kqygww/article/details/41277555     64-bit and iOS 8 Requirements for New ...

  9. Oracle Delete与系统资源

    在用Delete删除数据时,SQL语句首先要通过全表扫描或索引扫描找到符合条件的记录并删除. 然而在这个过程中将消耗大量的CPU资源,I/O资源以及UNDO数据. 如果删除的数据量较大,将极大的影响系 ...

  10. 【BZOJ4917】Hash Killer IV 乱搞

    [BZOJ4917]Hash Killer IV Description 有一天,tangjz造了一个Hash函数: unsigned int Hash(unsigned int v){     un ...