除了BODY和HTML的滚动条,在触屏下几乎所有浏览器都不支持DIV的滚动条(说几乎是因为新版的IOS已经支持)
这个应该算是完美解决方案了,需要注意的是setTimeout,必须要在内部的HTML解析完毕,JS获取它的高度不会出错的时候才可以执行,一般来说100毫秒差不多了.如果内部是个大图片,且高度不固定的时候,倒计时要久一点.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>iScroll demo: simple</title>
<script type="text/javascript" src="../../src/iscroll.js"></script>
<script type="text/javascript">
var myscroll;
function loaded(){
setTimeout(function(){
myscroll=new iScroll("wrapper");
},200 );
}
window.addEventListener("load",loaded,false);
</script>
<style type="text/css" media="all">
body, ul, li {
padding: 0;
margin: 0;
border: 0;
}
body {
font-size: 12px;
-webkit-user-select: none;
-webkit-text-size-adjust: none;
font-family: helvetica;
}
#header {
position: absolute;
z-index: 2;
top: 0;
left: 0;
width: 100%;
height: 45px;
line-height: 45px;
background-color: #d51875;
background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #fe96c9), color-stop(0.05, #d51875), color-stop(1, #7b0a2e));
background-image: -moz-linear-gradient(top, #fe96c9, #d51875 5%, #7b0a2e);
background-image: -o-linear-gradient(top, #fe96c9, #d51875 5%, #7b0a2e);
padding: 0;
color: #eee;
font-size: 20px;
text-align: center;
}
#header a {
color: #f3f3f3;
text-decoration: none;
font-weight: bold;
text-shadow: 0 -1px 0 rgba(0,0,0,0.5);
}
#footer {
position: absolute;
z-index: 2;
bottom: 0;
left: 0;
width: 100%;
height: 48px;
background-color: #222;
background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #999), color-stop(0.02, #666), color-stop(1, #222));
background-image: -moz-linear-gradient(top, #999, #666 2%, #222);
background-image: -o-linear-gradient(top, #999, #666 2%, #222);
padding: 0;
border-top: 1px solid #444;
}
#wrapper {
position: absolute;
z-index: 1;
top: 45px;
bottom: 48px;
left: 0;
width: 100%;
background: #aaa;
overflow: auto;
}
#scroller {
position: absolute;
z-index: 1;
/*-webkit-touch-callout:none;*/
-webkit-tap-highlight-color: rgba(0,0,0,0);
width: 100%;
padding: 0;
}
#scroller ul {
list-style: none;
padding: 0;
margin: 0;
width: 100%;
text-align: left;
}
#scroller li {
padding: 0 10px;
height: 40px;
line-height: 40px;
border-bottom: 1px solid #ccc;
border-top: 1px solid #fff;
background-color: #fafafa;
font-size: 14px;
}
</style>
</head>
<body>
<div id="header"><a href="http://cubiq.org/iscroll">iScroll</a></div>
<div id="wrapper">
<div id="scroller">
<ul id="thelist">
<li>Pretty row 1</li>
<li>Pretty row 2</li>
<li>Pretty row 3</li>
<li>Pretty row 4</li>
<li>Pretty row 5</li>
<li>Pretty row 6</li>
<li>Pretty row 7</li>
<li>Pretty row 8</li>
<li>Pretty row 9</li>
<li>Pretty row 10</li>
<li>Pretty row 11</li>
<li>Pretty row 12</li>
<li>Pretty row 13</li>
<li>Pretty row 14</li>
<li>Pretty row 15</li>
<li>Pretty row 16</li>
<li>Pretty row 17</li>
<li>Pretty row 18</li>
<li>Pretty row 19</li>
<li>Pretty row 20</li>
<li>Pretty row 21</li>
<li>Pretty row 22</li>
<li>Pretty row 23</li>
<li>Pretty row 24</li>
<li>Pretty row 25</li>
<li>Pretty row 26</li>
<li>Pretty row 27</li>
<li>Pretty row 28</li>
<li>Pretty row 29</li>
<li>Pretty row 30</li>
<li>Pretty row 31</li>
<li>Pretty row 32</li>
<li>Pretty row 33</li>
<li>Pretty row 34</li>
<li>Pretty row 35</li>
<li>Pretty row 36</li>
<li>Pretty row 37</li>
<li>Pretty row 38</li>
<li>Pretty row 39</li>
<li>Pretty row 40</li>
</ul>
</div>
</div>
<div id="footer"></div>
</body>
</html>
相关推荐
DIV 滚动条样式详解 在 HTML 中，我们经常需要在 DIV 元素中添加滚动条，以便在内容超出 DIV 区域时，能够滚动查看内容。这篇文章将详细介绍如何使用 CSS 样式表来实现 DIV 滚动条的样式设置。 什么是 DIV 滚动条...
在网页设计中，div元素是常用的布局容器，而滚动条则是当内容超出div范围时，帮助用户浏览更多内容的重要交互工具。"div滚动条优化"这个主题主要关注如何在不牺牲滚动功能的前提下，通过CSS样式和JavaScript技术来...
本篇文章将详细探讨如何在Vue项目中自定义浏览器滚动条，同时确保兼容大部分浏览器，包括较为古老的Internet Explorer（IE）。 首先，我们需要理解浏览器滚动条的工作原理。滚动条由两个主要部分组成：轨道（track...
### 去浏览器滚动条代码知识点详解 #### 一、背景与需求分析 在Web开发过程中，有时我们希望页面能够呈现出一种全屏无边框的效果，或者为了保持设计的一致性和美观度，需要隐藏浏览器默认的滚动条。尤其是在制作...
而当这些`div`元素中的内容超出其设定的宽度或高度时，滚动条就会出现，以帮助用户浏览不可见的部分。在本文中，我们将深入探讨如何使用CSS来定制`div`元素的滚动条样式，以提升网页的视觉效果和用户体验。 一、...
2. **滚动条**: 当div的内容超出其宽度或高度时，浏览器会自动显示滚动条，以便用户查看隐藏的内容。 3. **jQuery**: jQuery是JavaScript的一个库，提供了丰富的API，简化了JavaScript编程，如选择器、事件处理、...
该方案最初基于jQuery实现，经过修改后适用于纯JavaScript环境，解决了在IE8浏览器下由于`onSelectStart="return false"`或者`onfocus()`事件处理导致的`div`内滚动条无法滚动的问题。 首先，让我们深入理解这个...
### 解决多种浏览器获取滚动条高度 在网页开发过程中，我们经常会遇到与浏览器兼容性相关的问题，尤其是在处理页面滚动相关的功能时。不同的浏览器对于某些属性的实现方式可能存在差异，这就要求开发者能够编写出...
网页局部div随滚动条置顶滚动是一种常见的网页交互设计，常用于新闻网站、电商页面或者任何需要突出显示特定内容的场景。这种效果使得用户在滚动页面时，某个div元素（通常包含重要信息或导航）始终保持在视口顶部，...
js实现div随浏览器高度变化，主要是高度变化和实现滚动条，还有侧栏显示隐藏，可以作为一个地图开发界面的参考
jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jsDIV滚动条jsDIV滚动条jsDIV滚动条
以上三种方法都可以有效地解决让`div`滚动条初始化到最低位置的问题。每种方法都有其适用场景： - **点击事件模拟滚动**：适用于需要模拟用户行为的场景。 - **`scrollIntoView`方法**：适用于现代浏览器环境，代码...
在网页设计中，"DIV滚动悬浮层"是一种常见的交互效果，它使得某个元素（通常是一个包含重要信息或功能的div）在用户滚动页面时始终保持在屏幕的特定位置，提供持续的可视性和可访问性。这种效果可以用于侧边栏菜单、...
### 完美解决ASP.NET回传后div滚动条位置复位的问题 在ASP.NET开发过程中，经常遇到的一个问题是页面更新或回传后，原本已经滚动的`div`元素会自动复位到初始状态，这对于用户体验来说是十分不利的。本文将详细介绍...
纯css实现table滚动条(纯css实现div滚动条),主要是通过设定高度/宽度及overflow:auto;实现.
本篇文章将深入探讨“多种风格的浏览器滚动条样式”，并以“malihu-custom-scrollbar-plugin-master”这个压缩包文件中的内容为例，讲解如何自定义滚动条样式，让滚动条成为网站设计的一部分，提升用户体验。...
描述中提到的“sly jquery定制div滚动条Scrollbar 兼容IE6 FireFox Safari”，意味着这个解决方案不仅关注美观，还考虑到了浏览器兼容性问题。IE6是一个老版本的Internet Explorer，通常对现代Web技术支持不足，而...
JavaScript 自定义浏览器滚动条兼容 IE、火狐和 chrome 本文主要共享了使用原生 JavaScript 实现自定义浏览器滚动条兼容 IE、火狐和 chrome 的思路与方法。通过 JavaScript 实现自定义浏览器滚动条，可以实现跨...
本文将深入探讨如何使用原生JavaScript来创建一个滚动条插件，以实现浏览器竖直滚动条的美化。 首先，我们需要了解浏览器默认的滚动条样式通常是单调且功能单一的。为了实现自定义的滚动条，我们需要使用CSS3的伪...