• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >jquery > 利用div+jquery自定义滚动条样式的2种方法

利用div+jquery自定义滚动条样式的2种方法

作者: 字体:[增加 减小] 来源:互联网 时间:2017-08-16

通过本文主要向大家介绍了jquery,滚动条等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com
最近做项目中有一个模块是用于实时监控的,左边有个菜单栏用于显示所有的设备,那当然是从数据库中动态获取的了,右边是个iframe用于显示监控画面。本来这个功能并不复杂,左边的菜单项是利用dtree.js来实现的,可时当功能实现完成之后,却发现一个问题,就是左边菜单栏中的设备名有的会很长,会超出了div的长度,准确说是左边iframe的宽度和长度不够。那么,这时就必须要利用滚动条了,可以设置左边菜单项div的overflow-x:auto;overlfow-y:auto;这样就会自动生成了滚动条,但是大家都知道自带的不好看。接下来就是重点了,如何修改滚动条的样式呢?

经过从网上的不断搜索,发现有两种方法:

第一种方法:利用CSS提供的样式,一共是8种属性吧,在这里不做详细介绍,网上很多这方面的资料。

第二种方法:自己写一个新的滚动条,即不用div自带的滚动条。这样想要什么样的效果就有什么样的效果。具体实现,在网上搜了很多,可以发现基本上只有竖向滚动条,而没有横向滚动条,无奈之下,自己利用jquery写另一个滚动条,当然也借鉴了只有竖向滚动条的程序。

说一下具体实现思路:目标div 即需要生成滚动条的div,里面嵌套了3个div,分别是用于显示内容的div_content,显示竖向滚动条的div_H,显示横向滚动条的div_W,具体布局就是按照自带滚动条的div的布局一样,然后显示滚动条的div即div_H和div_W有各自包含了3个div,即左右箭头2个,滚动条1个。具体代码如下:
然后无非就是一些判断,div的内容是否超过了div的范围,监听事件的添加。具体代码可见我的下载资源;
分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • 基于jQuery对象和DOM对象和字符串之间的转化实例
  • jquery+css实现简单的图片轮播效果
  • 使用jQuery实现鼠标点击左右按钮滑动切换
  • jQuery实现上传图片前预览效果功能
  • jQuery初级教程之网站品牌列表效果
  • 基于jquery实现多选下拉列表
  • jQuery接受后台传递的List的实例详解
  • 详解jquery选择器的原理
  • jQuery上传插件webupload使用方法
  • 关于jquery form表单序列化的注意事项详解

相关文章

  • 2017-08-16jquery实现ajax提交form表单的方法总结
  • 2017-08-16Jquery为a标签的href赋值实现代码
  • 2017-08-16Asp.net下使用Jquery Ajax传送和接收DataTable的代码
  • 2017-08-16TinyMCE汉化及本地上传图片功能实例详解
  • 2017-08-16jQuery中 noConflict() 方法使用
  • 2017-08-16jQuery实现仿淘宝带有指示条的图片转动切换效果完整实例
  • 2017-08-16jQuery DateTimePicker 日期和时间插件示例
  • 2017-08-16jQuery实现在HTML文档加载完毕后自动执行某个事件的方法
  • 2017-08-16jquery1.4 教程二 ajax方法的改进
  • 2017-08-16基于JQuery的列表拖动排序实现代码

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • jquery表单验证插件(jquery.validate.js)的3种使用方式
    • jquery幻灯片插件bxslider样式改进实例
    • jquery背景跟随鼠标滑动导航
    • jquery精度计算代码 jquery指定精确小数位
    • jQuery Div中加载其他页面的实现代码
    • 网站如何做到完全不需要jQuery也可以满足简单需求
    • jquery 图片缩放拖动的简单实例
    • 由点击页面其它地方隐藏div所想到的jQuery的delegate
    • JQuery 1.3.2以上版本中出现pareseerror错误的解决方法
    • jQuery隐藏和显示效果实现

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有