2018-05-14 14:26:54 qq_34824564 阅读数 557

直接为div指定overflow属性为auto,但是必须指定div的高度,如:

<div style="position:absolute; height:400px; overflow:auto">

</div>

如果要出现水平滚动条,则: overflow-x:auto

如果要出现垂直滚动条为,则: overflow-y:auto

如果该div被包含在其他对象中,则添加:position:relative
2014-05-08 11:09:10 axl234 阅读数 603

除了BODYHTML的滚动条,在触屏下几乎所有浏览器都不支持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>

 

2018-02-08 11:13:56 u011974399 阅读数 345

标题项目中需要将html页面分别封装成安卓app和iOS,页面在安卓上运行正常,但是在iOS中,iframe样式错误,没有了滚动条,将页面撑开了(iframe中引用的是富文本编辑器页面)


标题解决方案:在iframe外套一层div,设置div的样式


代码:

.warpper {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    width: 80%;
    height: 420px;
    margin-left: 10%;
    margin-top: 3%;
    border: 1px solid black
}
<div style="margin-top: 3%;margin-left: 10%">富文本(可包含图片):</div>
    <div class="warpper">
        <iframe id="itemIframe" src="/ueditor/index.html" frameborder="0" height="100%" width="100%"></iframe>
    </div>

效果:

这里写图片描述

2018-04-16 17:30:58 sinat_32034679 阅读数 1286

在做公户号的时候,有一个页面引入了IFrame。然后出现了一个很尴尬的问题,iframe不出现滚动条,而且在屏幕高度以外的内容都被截掉了。

百度之后,找到了解决方案,亲测可行~

要点只要两个:1.将iFrame包裹在一个div中;2.给这个div赋予一个已出滚动样式。

以下给出代码:

jsp部分:

<div class='scroll-wrapper'><iframe src='***' width='97%' height='320px' scrolling='yes'></iframe></div>

css部分:

/**
iOS兼容iFrame滚动条样式
 */
.scroll-wrapper {
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    width: 98%;
    height: 330px;
}
.scroll-wrapper iframe {
    width: 98%;
    height: 320px;
}

2017-02-14 10:57:48 l1052102729 阅读数 4275


<style type="text/css">
.scrolldiv{
height: 85%;
overflow: hidden;
overflow-y: scroll;
}
.scrolldiv::-webkit-scrollbar-track-piece {
  background-color: #FFF;
  border-left: 1px solid #FFF;
}
.scrolldiv::-webkit-scrollbar {
  width: 2px;
  height: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
.scrolldiv::-webkit-scrollbar-thumb {
  background-color: #ccc;
  background-clip: padding-box;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  min-height: 10px;
}
.scrolldiv::-webkit-scrollbar-thumb:hover {
  background-color: #ccc;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
</style>


<div class="scrolldiv">
${activityDesc}
</div>

ios监听滚动问题

阅读数 36

没有更多推荐了,返回首页