想让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. STL next_permutation(a,a+n) 生成一个序列的全排列。满足可重集。

    /** 题目: 链接: 题意: 思路: */ #include <iostream> #include <cstdio> #include <vector> #in ...

  2. python升级导致yum命令无法使用的解决

    1.报错信息如下: [root@develop bin]# yum [root@develop local]# yum -y install prce There was a problem impo ...

  3. HashMap? ConcurrentHashMap?

    前言 Map 这样的 Key Value 在软件开发中是非常经典的结构,常用于在内存中存放数据. 本篇主要想讨论 ConcurrentHashMap 这样一个并发容器,在正式开始之前我觉得有必要谈谈 ...

  4. onload 和 onunload 事件

    onload 和 onunload 事件会在用户进入或离开页面时被触发. onload 事件可用于检测访问者的浏览器类型和浏览器版本,并基于这些信息来加载网页的正确版本. onload 和 onunl ...

  5. JPA（Java Persistence API）Java持久化API-介绍

    JPA全称: Java Persistence API JPA的宗旨是为POJO提供持久化标准规范,能够脱离容器独立运行,很方便开发和测试.JPA通过JDK 5.0注解或XML描述对象-关系表的映射关 ...

  6. Spring入门第一例

    通过多天对基础语法的学习,早就向往一睹SPRING的芳容.今天按照ITEYE 唐的 教程,第一次运行Spring成功,步骤及注意事项如下: 一.基础环境 Jdk1.8, Eclipse4.71 .Sp ...

  7. 安装VC6.0遇到的问题

    1. 问题现象 安装VC6.0后,又安装了VS2005.用VC6.0打开以前的.dsw文件时,程序自动关闭.如下图所示. 具体操作是:选择一个.dsw文件,右键菜单[打开方式]中选择[Microsof ...

  8. vim-addon-manager【转】

    Vim是一个非常优秀的编辑器,但是没装插件的Vim就始终只是个编辑器而已,是插件让Vim变得更加强大. 但是插件装得多了,管理就成了问题,Vim本身并没有提供插件管理功能,往往时间一长,.vim/vi ...

  9. OpenCV学习笔记九：opencv_stitching模块

    一,简介: 该库用于图像拼接.

  10. AdnroidUtils-常用工具类(showDiaLog/HTTP)

    1. HttpUtils 该工具类应用于Android客户端+Web服务器 /** * */ package com.nubb.auction.client.util; import java.uti ...