-webkit-scrollbar竖

DIV横排/竖排滚动（white-space/::-webkit-scrollbar的使用技巧以及display: inline-block的选择）支持手势

参考微信的京东客户端http://wqs.jd.com/,实现DIV的横排滚动,且支持手势,并且不会出现滚动跳,效果如下: 但是观察其div结构是没有使用任何JS去实现. 一.实现上DIV的横排观察其结构发现,使用了white-space: nowrap;这个属性,叫做文本排列方向,参考:http://www.w3school.com.cn/cssref/pr_text_white-space.asp 如果我们要实现这样的方式,有如下方案: 1.最外层的DIV设置成固定的宽度,一定是比屏幕大很

webkit内核浏览器的CSS写法

-webkit-tap-highlight-color: transparent; Mobile上点击链接高亮的时候设置颜色为透明 -webkit-user-select: none; 设置为无法选择文本 -webkit-touch-callout: none; 长按时不触发系统的菜单, 可用在图片上加这个属性禁止下载图片 :-webkit-full-screen canvas {} 全屏模式时的样式(for Desktop) div p :matches(em, b, strong) {} 使

webkit

HTML, 从HTML文档的开始到结束排列: <meta name="viewport" content="width=device-width, initial-scale=1.0″/> 让内容的宽度自适应为设备的宽度, 在做Mobile Web时必须加的一条 <meta name="format-detection" content="telephone=no"]]> 禁用手机号码链接(for iPhone)

[Unity官方文档翻译]ScrollRect

官方地址:http://docs.unity3d.com/Manual/script-ScrollRect.html 一边学习一边翻译不知效率如何＝＝ Scroll Rect 在小区域里展示大量内容可以使用这个组件,它的功能就是滑动这片区域来显示内容. 当ScrollRect里可滑动内容可见时,它和Mask组件组合从而创建一个滚动视图.另外它也和1,2个Scrollbars组件组合用来水平或竖直滑动. A ScrollRect 属性 Content 一个可滑动UI元素中RectTransfor

GUI之ScrollView的使用

ScrollView ScrollView是unity提供的一个方便的滚动视图. 组成 ScrollView由四个部分组成: ViewPort 和 Content ScrollView: 视图范围,Content的Mask,控制Content的显示范围. Content: 滚动视图的内容容器,一般会配合Layout组件做成一个列表. Scrollbar Horizontal 和 Scrollbar Vertical Content的水平.竖直滚动条. ScrollRect详解 ScrollRec

自定义浏览器滚动条的样式，打造属于你的滚动条风格——兼容IE和webkit(ff不支持)

前段时间,到网上找素材时,看到了一个很个性的滚动条式,打开Chrome的调试工具看了一下,发现不是用JavaScript来模拟实现的,觉得有必要折腾一下.于是在各大浏览器中对比了一下,发现只用Chrome适用,也就是说这个用的是Chrome的私有CSS属性.便百之谷之后,发现原来不仅仅只用Chrome,其它的浏览器在不同程度上支持自定义滚动条样式的.下面是我不断测试的结果,若有错误或不全,请在评论里面给出,我会立马更正:若有更好的方案,你可以留言,让大家都开开眼界...... 自定义IE浏

webkit webApp 开发技术要点总结

如果你是一名前端er,又想在移动设备上开发出自己的应用,那怎么实现呢?幸好,webkit内核的浏览器能帮助我们完成这一切.接触 webkit webApp的开发已经有一段时间了,现把一些技巧分享给大家 : 1. viewport:也就是可视区域.对于桌面浏览器,我们都很清楚viewport是什么,就是出去了所有工具栏.状态栏.滚动条等等之后用于看网页的区域,这是真正有效的区域.由于移动设备屏幕宽度不同于传统web,因此我们需要改变viewport; 实际上我们可以操作的属性有4 个: width

webkit事件处理

1,概述原文地址:http://blog.csdn.net/awebkit/article/details/8493716 浏览器处理事件一般有两个过程,捕获过程和冒泡过程,这是由addEventListener的第三个参数决定的. 基本事件流每个事件都对应一个事件目标(EventTarget)(也是一个node 节点),EventTarget 有event 的target 属性指定. 每个事件目标注册有若干事件监听者(EventListerner), 这些监听者在事件到达后激活,激活的顺序

webkit webApp 开发技术要点总结【转】

如果你是一名前端er,又想在移动设备上开发出自己的应用,那怎么实现呢?幸好,webkit内核的浏览器能帮助我们完成这一切.接触 webkit webApp的开发已经有一段时间了,现把一些技巧分享给大家 : 1. viewport:也就是可视区域.对于桌面浏览器,我们都很清楚viewport是什么,就是出去了所有工具栏.状态栏.滚动条等等之后用于看网页的区域,这是真正有效的区域.由于移动设备屏幕宽度不同于传统web,因此我们需要改变viewport; 实际上我们可以操作的属性有4 个: width

webkit,HTML5头部标签

大家都知道在移动前端开发中添加一些webkit专属的HTML5头部标签,帮助浏览器更好解析html代码,更好地将移动web前端页面表现出来.本文整理一些HTML5头部<meta>标签常用的信息.有错误的,敬请留言指正,或可以留言补充,欢迎留言交流! XML/HTML Code:  <meta charset="utf-8" />  <meta name="keywords&

[转]How WebKit’s Event Model Works

原文:https://homes.cs.washington.edu/~burg/projects/timelapse/articles/webkit-event-implementation/ First, here are some definitions of major parts of WebKit: JavaScriptCore The JavaScript execution engine. It has no dependencies on other components. W

【前端】webkit内核浏览器DIV滚动条样式修改和设置

webkit内核浏览器DIV滚动条样式修改和设置引言: 最近在做自己的小项目,为了设计出好看的页面费劲了心思,大到页面的整体布局,小到DIV的滚动条都不放过,以下是我通过查阅资料总结的webkit内核浏览器滚动条样式的修改方法. 原理: webkit浏览器css设置滚动条主要有下面7个属性 1. ::-webkit-scrollbar 滚动条整体部分,可以设置宽度啥的 2. ::-webkit-scrollbar-button 滚动条两端的按钮 3. ::-webkit-scrollbar-t

查看，设置，设备的竖屏-横屏模式 screen.orientation

<body> <div id="doc"></div> <div id="model"></div> <script> let a = 0; if ('orientation' in screen) { document.getElementById('doc').textContent = `屏幕旋转了${a}次.`; document.getElementById('model').text

webkit webApp 开发技术要点总结[转]

http://www.cnblogs.com/pifoo/archive/2011/05/28/webkit-webapp.html 如果你是一名前端er,又想在移动设备上开发出自己的应用,那怎么实现呢?幸好,webkit内核的浏览器能帮助我们完成这一切.接触 webkit webApp的开发已经有一段时间了,现把一些技巧分享给大家 : 1. viewport:也就是可视区域.对于桌面浏览器,我们都很清楚viewport是什么,就是出去了所有工具栏.状态栏.滚动条等等之后用于看网页的区域,这是真

css水平居中，竖直居中技巧（二）

css水平居中,竖直居中技巧(二)===### 1.效果 ### 2.代码#### 2.1.index.html <!DOCTYPE html> <html lang="zh-cn"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta http-equiv="X-UA-C

webkit开发，app移动前端知识点

1. viewport:也就是可视区域.对于桌面浏览器,我们都很清楚viewport是什么,就是出去了所有工具栏.状态栏.滚动条等等之后用于看网页的区域,这是真正有效的区域.由于移动设备屏幕宽度不同于传统web,因此我们需要改变viewport; 实际上我们可以操作的属性有4 个: width - // viewport 的宽度 (范围从200 到10,000,默认为980 像素) height - // viewport 的高度 (范围从223 到10,000) initial-scale -

css水平居中，竖直居中技巧（一）

css水平居中,竖直居中技巧(一)===### 1.效果 ### 2.代码#### 2.1.index.html <!DOCTYPE html> <html lang="zh-cn"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta http-equiv="X-UA-C

-webkit/IE/Firefox的一些样式

仅限于-webkit的样式特效:-webkit-overflow-scrolling:touch;滚动时回弹效果:如果出现偶尔卡住不动的情况,那么在使用该属性的元素上不设置定位或者手动设置定位为static:如果添加动态内容页面不能滚动,让子元素height+1:方法就是在webkit-overflow-scrolling:touch属性的下一层子元素上,将height加1%或1px.从而主动触发scrollbarmain-inner { min-height: calc(100% + 1px)

CSS3自定义滚动条样式-webkit内核

自定义滚动条实现此部分针对webkit内核的浏览器,使用伪类来改变滚动条的默认样式,详情如下: 滚动条组成部分 1. ::-webkit-scrollbar 滚动条整体部分 2. ::-webkit-scrollbar-thumb 滚动条里面的小方块,能向上向下移动(或向左向右移动) 3. ::-webkit-scrollbar-track 滚动条的轨道(里面装有Thumb) 4. ::-webkit-scrollbar-button 滚动条的轨道的两端按钮,由于通过点击微调小方块的位置. 5

CSS3：scrollbar样式设置

CSS3:scrollbar样式设置 1. 设置出现滚动条的方式 overflow:scroll --- x和y方向都会出现滚动条或者 overflow-x:scroll --- 只有x方向出现滚动条或者 overflow-y:scroll --- 只有y方向出现滚动条当块级内容区域超出块级元素范围的时候,就会以滚动条的形式展示,你可以滚动里面的内容,里面的内容不会超出块级区域范围.有时候我们需要自定义滚动条的样式,比如一开始就让它显示,改变滚动条的颜色,设置轨道的样式等. 2.认识滚动条

Android-横竖屏切换问题（转）

先附上链接:http://www.cnblogs.com/xiaoQLu/p/3324503.html 项目要求要做横竖屏,发现横屏的时候,生命周期函数会乱执行,网上找了一大堆资料. 结果如下: 只需要配置以下属性即可实现横竖屏切换的时候不重新执行生命周期,也就是不会执行onDestroy,然后再onCreate等. android:configChanges="orientation|keyboardHidden" 结果很失望,因为项目里面本来就已经是这样配置的了.坑爹的是:说好切换

巴特西