想让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. 敲敲SQL语句

    基本命令 查看数据库:show databases; 选择数据库:use mysql_crash; 连接数据库:需要:主机名,端口,合法用户名,用户口令 mysql -u ben -p -h loca ...

  2. mybatis执行多条sql语句

    1,mybatis执行多条sql语句,有以下几种思路, a,存储过程 b,修改jdbc的参数,允许执行多条语句,如下所示: sqlserver可以直接使用begin,end来执行多条语句, mysql ...

  3. ThinkPHP -- 问题

    @.nginx下,找不到页面,如果然nginx支持pathinfo模式 原文:http://www.leixuesong.cn/1418 把文章的配置拷贝了下.

  4. jquery call 函数改变this作用域

    call的用法在许多地方都看到过介绍.可以用来改变函数的作用域. 在页面中我们在一个input中添加click事件 <input id="Button1" type=&quo ...

  5. poj 2513(欧拉路径+字典树映射)

    题目链接:http://poj.org/problem?id=2513 思路:题目还是很简单的,就是判断是否存在欧拉路径,我们给每个单词的头和尾映射序号,统计度数.对于给定的无向图,当且仅当图连通并且 ...

  6. hdu 4005(边双连通)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4005 思路:首先考虑边双连通分量,如果我们将双连通分量中的边删除,显然我们无法得到非连通图,因此要缩点 ...

  7. WPF简介:VS创建桌面应用程序

    1.简介 1/ 什么是WPF WPF,Windows Presentation Foundation也,译过来就是"Windows呈现基础",你看它的目的非常明确,就是用来把数据& ...

  8. 控制器post参数接收

    一.post对象 1.后台c# public class TestController : ApiController { [HttpPost] public string SaveData1(Tb_ ...

  9. 网页或WEB应用或PC端浏览器调用百度地图API

    今天在写微网页中遇见了调用百度地图这个问题:在一个容器中显示地图信息如图(设计图截图) 然后在网上查了接口:http://api.map.baidu.com/,就是这个东东,当然不止这个,还有几个必选 ...

  10. html5离线缓存使用

    html5 离线缓存使用以及注意事项 1.index.html中加入离线缓存的声明文件 如:<!DOCTYPE html><html manifest="test.appc ...