CSS -webkit-overflow-scrolling 属性

概述

-webkit-overflow-scrolling 属性控制元素在移动设备上是否使用滚动回弹效果.

值

auto
使用普通滚动, 当手指从触摸屏上移开，滚动会立即停止。
touch
使用具有回弹效果的滚动, 当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。
示例

-webkit-overflow-scrolling: touch; /* 当手指从触摸屏上移开，会保持一段时间的滚动 */

-webkit-overflow-scrolling: auto; /* 当手指从触摸屏上移开，滚动会立即停止 *

时间： 2024-07-31 10:43:46

CSS -webkit-overflow-scrolling 属性的相关文章

CSS position overflow float 属性详解

position overflow float 几个属性比较容易混淆,写一段代码详解各自具体情况: position在w3school的可能取值: 值描述 absolute 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位. 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定. fixed 生成绝对定位的元素,相对于浏览器窗口进行定位. 元素的位置通过

CSS 的overflow:hidden 属性详细解释

overflow:hidden这个CSS样式是大家常用到的CSS样式,但是大多数人对这个样式的理解仅仅局限于隐藏溢出,而其实它还有清除浮动这个功能. taobao demo 这段代码是一个做淘宝搜索框中的一段代码,这里overflow:hidden就起到了一个清除浮动的效果. 具体代码可以看慕课网http://www.imooc.com/video/282里的教程

Css Overflow 溢出属性实例代码

<!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>css属性实例</title>

css之overflow

也说css之overflow:细探之下有意想不到的结果 2016-11-5 滴滴出行·DDFE 作者:dolymood overflow 是一个非常常用的 CSS 属性,一般来说会认为很简单,其实细究之后就会发现他还有很多小特性或者说意想不到的结果: 下面就介绍下(在浏览器环境下)关于 overflow 的小总结. 哪些元素上有效? 首先 overflow 是应用到哪些元素上有效的,任意元素? 当然不是,它只能应用于块容器上. 那什么是块容器呢? 简单来说:除了 table 和可替换(置换)元素

转：css中overflow:hidden 不起作用了吗？

css中overflow:hidden 不起作用了吗? 有同学遇到这样的问题,现象是给元素设置了overflow:hidden,但超出容器的部分并没有被隐藏,难道是设置的hidden失效了吗?其实看似不合理的现象背后都会有其合理的解释. 我们知道,overflow属性值有这几种:visible:声明内容不会被剪裁.比如内容可能被渲染到容器外面.hidden:声明内容将被剪裁,并且也甭想使用滚动条来查看剪裁掉的内容.scroll:声明内容将被剪裁,但有可能出现滚动条来查看被剪裁掉的内容.滚动条出现

深入理解css中的margin属性

转载自 http://www.cnblogs.com/zhuzhenwei918/p/6124263.html 深入理解css中的margin属性之前我一直认为margin属性是一个非常简单的属性,但是最近做项目时遇到了一些问题,才发现margin属性还是有一些"坑"的,下面我会介绍margin的基本知识以及那些"坑".这篇博文主要分为以下几个部分: margin--基础知识 margin--在同级元素(非父子关系)之间应用 margin--在父元素和子元素之间

CSS中overflow:hidden在ie6、ie7无效不能隐藏解决办法

在我们做前端时会碰到一个固定的宽度当文字超过我们这个固定宽度时我们不换行的同时希望文字隐藏了, 那我们通常会使用overflow:hidden来隐藏文字,但是发现在ie6,ie7下overflow:hidden无效了,那么如何解决这个问题呢? 这就是ie6.ie7 的bug. 解决方法: 当父元素的直接子元素或者下级子元素的样式拥有position:relative属性时,父元素的overflow:hidden属性就会失效.我们在IE 6 7内发现子元素会超出父元素设定的高度,即使父元素设置了o

深入理解css中的定位属性：position

深入理解css中的定位属性:position 在网页设计中,position属性的使用是非常重要的.有时如果不能认识清楚这个属性,将会给我们带来很多意想不到的困难. position属性共有四种不同的定位方法,分别是static.fixed.relative.absolute. 第一部分:static static定位是HTML元素的默认值,即没有定位,元素出现在正常的流中,因此,这种定位就不会收到top,bottom,left,right的影响. 如html代码如下: <div class=&qu

CSS中的!important属性用法

关于CSS的运用技巧有很多, 今天主要探讨一下CSS中 !important 这个属性的用法.在CSS的使用中,遇到最多的问题就是不同浏览器之间的兼容问题. 由于IE并不严格执行W3C标准, 而又几乎垄断了浏览器市场. 所以作为一名合格的网站制作人员, 必须要针对不同的浏览器进行微调. 实现不同浏览器之间兼容的方法有很多, 比如利用JS探测用户的浏览器类型,从而调用不同的样式表. 或者就是利用!important 属性来实现微调的效果. 下面是具体的例子. 下面是一段普通的 DIV 代码: 下面

inline-block元素设置overflow:hidden属性导致相邻行内元素向下偏移

在表单修改界面中常会使用一个标签.一个内容加一个修改按钮来组成单行界面,如下所示: 那么在表单总长度受限的情况下,当中间的邮箱名称过长时,会遮盖到旁边的按钮. 我们可以把中间邮箱设定最大宽度,然后对于长度超出部分设置overflow: hidden来解决这个问题. 但是这可能会引发另一个经典的 baseline 对齐问题,也就是本文要讨论的主要问题. 1. 问题现象我们先给出一个在线实例: http://wow.techbrood.com/fiddle/15438 我们可以看到当给中间的 in