Chrome ::-webkit-scrollbar 整体部分 ::-webkit-scrollbar-track 轨道 ::-webkit-scrollbar-track-piece 内层轨道 ::-webkit-scrollbar-thumb 滚动条滑块 ::-webkit-scrollbar-button 两侧按钮 ::-webkit-scrollbar-corner 边角(横纵滚动条的交汇处) ::-webkit-resizer 边角拖拽控件 IE scrollbar-base-colo…

如果移动端访问不佳,请使用–>GitHub版 背景 设计师给的设计图完全依照 IOS 的标准来的,导致很多细节的控件都得自己重写,最近的设计图中有显示滚动条,Android 默认的滚动条样式(带描边)和设计图格格不入,无奈,只好研究下自定义 Scrollbar 样式.这里稍微整理下. 知识点 在ListView/ScrollView/RecyclerView中添加属性: <!-- 情况A :垂直滚动条--> android:scrollbars="vertical"…

简介 此插件是 Malihu jQuery Scrollbar 为了在 Angular2+ 环境下使用,封装的一个ts的版本.提供directive和service. 从安装量来看,它比不过 perfect-scrollbar,所以我最后也没用它.但是也记录一下用法,万一以后要用呢! 安装 npm install ngx-malihu-scrollbar --save 我当时安装的版本是 `7.0.0`. 添加需要的css和script 这个插件是依赖jQuery的. 在_angular-cli…

版本 angular 5.0 ngx-perfect-scrollbar ^5.3.5 为什么不用 ngx-perfect-scrollbar 最新的版本 v7 呢? 因为它报错啊!!! 每次init的时候,就报一个Object() is not a function. 根据GitHub上热心网友的建议,就downgrade了. 详见:https://github.com/zefoy/ngx-perfect-scrollbar/issues/189 安装 npm 安装没啥好说的 npm inst…

1. activity_maim.xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" > <ScrollV…

原文:WPF自定义TextBox及ScrollViewer 寒假过完,在家真心什么都做不了,可能年龄大了,再想以前那样能专心坐下来已经不行了.回来第一件事就是改了项目的一个bug,最近又新增了一个新的功能,为程序添加了一个消息栏.消息栏有许多形式,要求是一个不需要历史记录,可以用鼠标选中消息内容的消息栏.我首先想到的就是TextBox,我个人比较喜欢美观的,有点强迫症,所以必须把TextBox中的ScrollViewer给改写了,好吧,开始. 本博文分为三个部分,第一部分将描述如何改写TextB…

一.体系概述 1.Windows Touch Input 和 Gestures消息 Windows Touch消息特性 通过在执行期间的监听和解释来使能.下面的示例展示了Windows7 上消息是怎么从硬件产生并发给应用程序的. 在最左边的那列,touch-sensitive 设备接收用户输入,驱动程序沟通硬件和操作系统,接下来,操作系统产生WM_TOUCH或者WM_GESTURE消息,进而发送给应用程序句柄,然后应用程序通过消息中封装的信息更新UI. 默认情况下应用程序受到的是gesture消…

可能大家厌倦了千篇一律的页面滚动条,如果你希望能够设计出与众不同的页面UI设计的话,Perfect ScrollBar可能就是你寻找的解决方案. 这个滚动条来自于一个个人项目,一个简单但是非常棒的滚动条设计.当然这里也有其它的解决方案,如果你有兴趣也可以阅读: 使用jQuery插件jScrollPane开发Mac OSX Lion风格的滚动条 一个仿Apple - OS X Lion操作系统风格的滚动条jQuery插件- lionbars 主要特性: 不需要修改任何的元素的css 滚动条不影响最…

尊重劳动成果,转载请标明出处http://www.cnblogs.com/tangZH/p/8423803.html android滑动组件的scrollBar,看了不是很顺眼,没办法,因为项目需求,得自定义一个. 1.自定义一个View,继承HorizontalScrollView 2.根据需求自己绘画出一个scrollBar,可以在dispatchDraw()中绘制,实践证明,在onDraw()方法中绘制无效 /** * 绘制滑动条的画笔 * * @param context */priva…

时间如流水,只能流去不流回! 点赞再看,养成习惯,这是您给我创作的动力! 本文 Dotnet9 https://dotnet9.com 已收录,站长乐于分享dotnet相关技术,比如Winform.WPF.ASP.NET Core等,亦有C++桌面相关的Qt Quick和Qt Widgets等,只分享自己熟悉的.自己会的. 阅读导航: 一.先看效果 二.本文背景 三.代码实现 四.文章参考 五.代码下载 一.先看效果 二.本文背景 设计师给的效果图中,滚动条的样式好好看呀,但是手上现有的控件库不…

一.滚动条基本样式 本次修改Scrollview及ScrollBar滚动条样式是通过纯样式实现的.修改的内容包含滚动条的颜色,上下按钮的隐藏.另外添加了鼠标经过滚动条动画. style样式如下: <!-- ScrollViewer 滚动条 --> <Style x:Key="ScrollBarThumb" TargetType="{x:Type Thumb}"> <Setter Property="OverridesDefau…

Wpf的ScrollBar可以分为六个区域:A.背景.B.向上按钮.C.向下的按钮.D.Track里面向上的按钮.E.Track里面向下的按钮.F.Track的Thumb 详情见下图 下面通过一个例子来自定义ScrollBar的样式 <Style x:Key="ScrollBar_style" TargetType="ScrollBar"> <Setter Property="Template"> <Setter.V…

主要特性: 不需要修改任何的元素的css 滚动条不影响最初的页面布局设计 滚动条支持完整的自定义 滚动条的尺寸和位置会随着容器尺寸或者内容的变化而变化 依赖于jQuery和相关几个类库 不需要定义宽度和高度.它会固定在容器的右下 你可以修改任何滚动条的样式,不依赖于其它脚本 滚动条支持'update'方法.如果你需要修改滚动条的位置和大小,只需要调用这个方法即可 不使用'scrollTop'和'scrollLeft',不是用任何绝对定位 使用要求: 必须有一个内容元素 容器必须拥有一个'posi…

自定义可左右滑动.拖拽滑动的平面柱状图 在做这种样式控件之前,可先浏览我之前预研的控件: A.自定义左右滑动ScrollViewer(可拖动滑动) B.自定义Bar柱状图 OK,现在说下控件具体设计过程: 1)采用Grid布局,这样可以将Y轴的标题设置平均高度,X轴的柱子也可以平均. 当然X轴也会存在一个问题,当数据较少时,只有俩个柱子难道就布满界面? 很简单,在Grid中多添加一个ColumnDefinition就行了,柱子的宽度设置成可配置,额外的一个设置成默认填充. 2)Bar采用Radi…

自定义滑动滚动条 预期目标:横向滚动条,可以左右滑动,用鼠标按住(触摸)然后释放可以实现快速滑动. 我们有几种方案: 1.ScrollViewer,修改其中的横向滚动条,将其中的背景设置为透明. 但是,存在的问题是,没有快速滑动的效果 2.ListBox,修改Panel为WrapPanel,或者直接将内容作为ItemSource填充进去. 这个能实现多个子元素切换的效果,但是针对单个或者一个区域的内容,就有点大材小用了. 3.用DevExpress中的LayoutControl.ScrollBo…

在 IOS 中,对 UIScrollView 的滚动条(ScrollBar Indicators)的自定义设置接口,一直都是很少的.除了能自定义简单的样式(UIScrollViewIndicatorStyle)和是否启用外,对于 一直显示滚动条.自定义滚动条(ScrollBar Indicators)的Width .颜色等,都是不能很方便的设置的. 虽然不能很方便,但是还是能实现的.通过一天的努力,不断的 google 和 overflow,终于找到了几个比较完美的解决办法. 本文禁止任何网站转…

项目中需要使用自定义滚动条,但是试用了很多都功能不够全,今天发现一个比较全而且用法很简单的 -- mCustomScrollbar http://manos.malihu.gr/jquery-custom-content-scroller/ 转自:http://www.wufangbo.com/mcustomscrollbar/ 关于 mCustomScrollbar mCustomScrollbar 是个基于 jQuery UI 的自定义滚动条插件,它可以让你灵活的通过 CSS 定义网页的滚动…

一．前言 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 本文主要内容: ScrollViewer的样式拆解及基本样式定义: ListBox集合控件的样式定义: 二．ScrollViewer自定义样式 ScrollViewer在各种列表.集合控件中广泛使用的基础组建,先看看效果图: 如上图,ScrollViewer简单来说分两部分,一个横向的滚动条,一个垂直滚动条,两个样式.模…

一．前言 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 本文主要内容: DataGrid自定义样式: ListView自定义样式: 二．DataGrid自定义样式 DataGrid是常用的数据列表显示控件,先看看实现的效果(动态图,有点大): DataGrid控件样式结构包括以下几个部分: 列头header样式 调整列头宽度的列分割线样式 行样式 行头调整高度样式 行头部样式…

Flex组件自定义滚动条的实现 .scrollBar{ downArrowUpSkin:Embed(source="img/mainLeftScrollBar/bar_bottom.png"); downArrowOverSkin:Embed(source="img/mainLeftScrollBar/bar_bottom.png"); downArrowDownSkin:Embed(source="img/mainLeftScrollBar/bar_bo…

在实际项目中,经常由于浏览器自带的滚动条样式太戳,而且在各个浏览器中显示不一样,所以我们不得不去实现自定义的滚动条,今天我就用最少的代码实现了一个自定义滚动条,代码量区区只有几十行,使用起来也非常方便. <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title…

如果你构建一个很有特色和创意的网页,那么肯定希望定义网页中的滚动条样式,这方面的 jQuery 插件比较不错的,有两个:jScrollPane 和 mCustomScrollbar. 关于 jScrollPane,大家见过的可能比较多,但是这个插件太过于古老而且功能不强大,效果在几年前非常不错,但是放在现在就不好说了.所以我选择了后者:mCustomScrollbar.下图是两者官方示例的简单对比: 本文就是介绍如何使用 mCustomScrollbar 这个插件,大部分的内容是翻译自 mCus…

今天是时候把软件中的进度条给美化美化了,最初的想法就是仿照QQ. 先前的进度条是这样,默认的总是很难受欢迎的:美化之后的是这样,怎么样?稍微好看一点点了吧,最后告诉你实现这个简单的效果在Qt只需要加几句简单的样式.下面就来吐槽吐槽,关于进度条样式的设置问题,欢迎评论交流,高手勿喷. Qt设置样式的方式有两种,一种直接在程序中写,适用于样式不多的情况:另一种,写入到文件中,适用用样式较大且需要提供换肤功能的情况. 1.写入到文件中,新建个xx.qss,然后复制一下内容 // 设置垂直滚动条基本样式…

现象 IE这货果然与众不同,当光标焦点在input时,点击同页面内其他区域的scrollbar,会导致焦点移动到body,从而触发绑定在input上的blur事件,如果input中的值与之前不同,甚至还会触发change事件... Chrome曾经也有类似的问题,但在最新版中已经修正了,而Firefox则完全没有这样的问题. 影响 这个问题看起来微不足道,实际上影响还是非常大的,主要表现在下面2个方面 多数的suggest控件会出错 suggest往往是通过input(输入部分)和div(下拉框…

今天是时候把软件中的进度条给美化美化了,最初的想法就是仿照QQ. 先前的进度条是这样,默认的总是很难受欢迎的:美化之后的是这样,怎么样?稍微好看一点点了吧,最后告诉你实现这个简单的效果在Qt只需要加几句简单的样式.下面就来吐槽吐槽,关于进度条样式的设置问题,欢迎评论交流,高手勿喷. Qt设置样式的方式有两种,一种直接在程序中写,适用于样式不多的情况:另一种,写入到文件中,适用用样式较大且需要提供换肤功能的情况. 1.写入到文件中,新建个xx.qss,然后复制一下内容 // 设置垂直滚动条基本样式…

在联系人界面 可以看到这种界面 手指快速滑动右边滑动条时 可以显示相应的字母图标 android里提供了android.widget.SectionIndexer这个接口去实现该效果 可是只能显示字母提示 但我们想实现右图这种效果时 则只能自定义去实现了 先上代码 MainActivity public class MainActivity extends Activity { /* * * 1 ListView BaseAdapter DataSource 列表 适配器 数据源 * 巨坑 外面…

首先,给个默认css,清除掉以前的样式,给默认背景 .scrollbar { margin-left: 30px; float: left; height: 300px; width: 65px; background: #F5F5F5; overflow-y: scroll; margin-bottom: 25px; } 然后给自定义宽度和颜色 .scrollbar::-webkit-scrollbar { width: 12px; background-color: #F5F5F5; } .…

一.显示ListView快速滑动块图标 设想这样一个场景,当ListView的内容有大于100页的情况下,如果想滑动到第80页,用手指滑动到指定位置,无疑是一件很费时的事情,如果想快速滑动到指定的位置,只需加上ListView的fastScrollEnabled属性等于true,启用快速滑动功能即可. <ListView android:id="@android:id/list" android:layout_width="match_parent" andr…

项目中需要自定义一个下拉框多选插件,业务问题还是自己实现比较好 通过$.fn 向jQuery添加新的方法 下拉数据通过参数传递进去,通过调用该插件时接收,选择后的确定与取消事件采用事件传递方式 代码如下: 1.效果图 2.代码 <div id="demo" class="dropdown-container"> <div class="dropdown-display"> <span></span>…

先看一下效果: 先分析一下滚动条有哪儿几部分组成: 滚动条总共有五部分组成: 两端的箭头按钮,实际类型为RepeatButton Thumb 两端的空白,实际也是RepeatButton 最后就是Thumb(滑块) 所以如果要修改滚动条的样式,就要修改这五部分的样式.具体代码如下: <!--自定义滚动条样式-->            <SolidColorBrush x:Key="StandardBorderBrush"                       …