CSS设置网页在Safari快速滚动和温柔的回弹_html/css_WEB-ITnose

WBOY

Release： 2016-06-21 08:52:35

Original

1248 people have browsed it

要实现这个效果很简单，只需要加一行css代码即可：

-webkit-overflow-scrolling : touch;

Copy after login

可用以下网页测试：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>    <head>        <meta charset="utf-8" />        <title>scroll</title>        <style type="text/css"> .container { width : 300px; height : 50%; -webkit-box-sizing : border-box; position : relative; overflow-y : auto; background-color : cyan; -webkit-overflow-scrolling : touch; /* liuhx:可以把这整行注释掉对比差别 */ } ul { height: 50px; } </style>    </head><body>    <div align="center">        <nav class="container">            <ul>1</ul>            <ul>2</ul>            <ul>3</ul>            <ul>4</ul>            <ul>5</ul>            <ul>6</ul>            <ul>7</ul>            <ul>8</ul>            <ul>9</ul>            <ul>10</ul>            <ul>11</ul>            <ul>12</ul>            <ul>13</ul>            <ul>14</ul>            <ul>15</ul>            <ul>16</ul>            <ul>17</ul>            <ul>18</ul>            <ul>19</ul>            <ul>20</ul>        </nav>    </div></body></html>

Copy after login

Related labels：

CSS设置网页在Safari快速滚动和温柔的回弹

source：php.cn

Previous article：[譯] Houdini: 你還沒聽說！這可能是 CSS 下一件最令人興奮的大事_html/css_WEB-ITnose Next article：css多行文本垂直居中_html/css_WEB-ITnose

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn