-webkit-overflow-scrolling: touch; 隐藏滚动条

如果你不知道 -webkit-overflow-scrolling: touch; 是什么意思,它是用在移动端 webkit 内核浏览器的一个滚动条效果,通常我们的页面滚动(body 会默认采用这种方案无需代码声明)当手指触摸滑动时,它是不会以一种惯性,带回弹效果的滚动,而这段代码即是让它拥有这种像 App 一样的效果(很显然它是非常有必要的,完全可以全局的变成默认行为),历史就不写了。

在我使用这段代码的时候它随即带来了一个问题,-webkit-overflow-scrolling: touch; 所带来的滚动条在未滚动的时候是隐藏状态,而当手指尝试去滑动滚动条就会显示出来,然而这个控件的样式并非像桌面浏览器可以自定义,也就是说无法隐藏。我尝试在互联网上搜索中英文解决方案,但是都没有结果。最后通过 Google 的手机版找到了这个方案。

首先我们假设这样一个结构:

或者你可能用的是 div 而不是 nav,这里并没有关系。首先 li 层也没有关系。

那么你设计的滚动部分可能在 ul,假设你的 ul 设定高度为 40px,并且隐藏了纵向(Y)滚动条,且允许横向(X)滚动;至此 nav 可能并没有做什么设定,又或者你也对它设定了一些参数。

隐藏这个 ul 所产生的横向滚动条的方法是:将 ul 的高度提升为 51px(增加 11px 左右),而后锁定 nav 的高度为 40px,并且对 nav 也做 x y 轴的滚动条隐藏(让超出的 11px 不会产生纵向滚动,而滚动条则位于 overflow-y: hidden; 所遮挡的部分,这样就达到看不见的目的了)。

对于自动变化高度的横向滚动条暂时好像这个方案并不能解决,不过一般都是固定高度吧?

我发布这篇文章的时候 谷歌的搜索主页(搜索结果菜单)是以这种方式解决这个问题的,你可以更改浏览器 UA 尝试看下它的源码。

其实这是一个很初级的 CSS 使用思维,但是我零零散散花了很长时间去解决这个问题,起初的思路是寻找有没有哪句代码可以直接隐藏掉它,随后我打算用 js 去做这件事代替 -webkit-overflow-scrolling: touch; 但是想想这挺蠢的。末尾无意间闪过 Google 的工具条……

另外一个小地方,如果你把 -webkit-overflow-scrolling: touch; 定义在了 body 可能出现标签页白屏的问题,所以你应该这样做:

不要定义在 body(body 和 html 会自动带有这种效果),而定义在,你的滚动条多半只可能出现在的几种类型,例如 nav div 和 ul。

目前为止 iOS 8.4 中的 Safari 不会白屏,但其它浏览器如果定义在 body 均会白掉。

去除超链接点击虚线框 CSS

有时候点击一个超链接,或者一个以超链接形式的不是网址的超链接 A,就会碰到这样的问题,这不是 webkit 的黄色蓝色框,就是个黑色的虚线框,在哪个浏览器它都冒出来。

好的,就这几个字吧,凑字数怪难的:

什么?依旧还有虚线框?

这样肯定没有了!(强制性优先级 !important)

针对 IE 的 CSS 写法,只对 IE 生效的 CSS写法

呃,webkit 现在基本覆盖了大范围,所以我们就只还是 IE 的问题,这个方法也是从网上其它地方搜索到的,当时自己遇到了 IE 的问题。那么,还未发布的微软斯巴达浏览器不知道又是个什么鬼,现在就到 IE11 为止的兼容性吧。

因为 IE 经常就会有些问题偏移,或浮动的处理方式不同而导致错误。

\0
\0\9

这样写:

这个写法从 IE9 到 IE11 为止都是没问题的,IE8 忘了这个就不测试了。

针对 IE 的 CSS 写法,只对 IE 生效的 CSS写法,只有 IE 认识的 CSS 写法。

带弧度的阴影 导航条阴影

Radians Shadows

这是一个极好的东西,为什么你们还在千遍一律的 box-shadow!来吧,美少年,没有弧度的阴影不是好阴影!

首先,为了实现它你得多放一个 div:

随后这是 CSS:

不过。以上阴影造型仅支持支持 WebKit 内核的浏览器。

Google 谷歌 后台类页面 滚动条样式

取材自 Google Analytics 后台,一个 WebKit 内核下的滚动条样式造型。

其中有个宽度值给滚动条左侧保留了 4px 间距,如果你不需要这个间距,可以做些修改。

这个滚动条在 x 轴 会显比 y 轴粗点,并且阴影是根据 y 轴设计的,因此在 x 轴效果并不是那么好,如果你不需要 x 轴滚动条。

2015.03.29 一个我偶尔用到的修改:

HTML CSS 初始化 响应式网页基础代码

内核选择,优先 WebKit 并选择最高 IE 内核你也可以指定 IE 几,在header:

缩放,禁止移动设备触手缩放,以下 1:1 显示设定,在 header:

图标,在 header:

网站的小图标(建议 favicon.ico 中包含多个尺寸,至少有 16×16 和 32×32)。

网站的大图标用于收藏夹以及放置于桌面用,它需要 App 图标一样清晰度,建议 256×256 的正方形,这在 iOS 和安卓设备上都需要。

初始化,取消各种内核自带属性,并设定媒体与嵌套,如优酷的视频分享 iframe 在不同设备尺寸时的高度:

IE 内核 WP 系统边框元素消除,放置在 header。

WebKit 内核。注意 -webkit-appearance:none; 阻止 iOS 移动端自带元素 在 WbKit 内核如 Chrome 桌面版也会生效,这会导致如下拉选择菜单的小箭头消失等变化,如果你在意那么需要分别定义移动设备与 PC 环境下的区别。


以下将整理上述头部代码,方便拷贝粘贴使用:


代码最后更新:2015.05.25