想让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. Painting Fence

    Painting Fence Time Limit:1000MS     Memory Limit:524288KB     64bit IO Format:%I64d & %I64u Sub ...

  2. mysql5.7.22 zip 版安装

    2.将zip文件解压到本地,本文解压到如下目录:D:\softwares\mysql-5.7.14-winx64 3.新建一个配置文件(my.ini)用于配置字符集.端口等信息,用以覆盖原始的配置文件 ...

  3. SpringMVC请求使用@PathVariable获取文件名称并且文件名中存在.导致路径被截取的问题

    在SpringMVC中,当使用@pathVariable通过Get请求获取路径名称时,如果路径名称上存在小数点,则获取不到小数点后面的内容,会被Spring截取. 比如我获取某一文件,路径是local ...

  4. 如何通过PHP判断年份是否是闰年----两种方法

    1.定义:闰年是对4取余为0,对100取余不等于0,对400取余等于0的年是闰年. 2.代码: 第一种方法:直接函数判断 $day = date('Y'); if ($day%4==0&&am ...

  5. eclipse 4.3 汉化

    打开浏览器,浏览“参考资料”内给出的“eclipse语言包下载”地址,在博客新页面找到地址链接,如图所示.“Babel Language...”开头的一栏下面就是各个eclise版本的语言包,此处以I ...

  6. jQuery插件-json2.js

    from:http://blog.csdn.net/gjb724332682/article/details/46682743 前言 json2.js是一个json插件,下载地址:https://gi ...

  7. Android无线测试之—Genymotion配置过程中常见问题

    一.前提条件: 已经部署好了Android UiAutomator测试环境. 二.在部署Genymotion时遇到了两类问题: 1.通过eclipse打开一个模拟设备,然后将编译好的jar包push到 ...

  8. 关于mysql联合索引

    1 2 3 4 5 6 7 CREATE TABLE `uniontest` (   `id` int(11) NOT NULL AUTO_INCREMENT,   `menuname` varcha ...

  9. MongoDB实践-自定义ASP.NET Session Store

    Session由来 由于HTTP协议是无状态的,客户端与服务器端进行“请求-响应”操作后,建立的连接就释放了,服务器端根本不知道刚才是哪个客户端访问的.但是有些场景是需要知道客户端的状态的,最典型的就 ...

  10. 一个有趣的IP不同的问题?

    1.我们已经知道了内网和外网的显示是不同的. 2.今天发现了我的飞Q传输上显示的ip和电脑上网络中显示的ip不同,但是传输文件是可以的,至于这个问题目前没有找到合理的解释,解释这个问题,但是这样就奇怪 ...