HTML5应用程序 [英] HTML5 Application
本文介绍了HTML5应用程序的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
您好，我正在开发HTML5应用程序+ jQueryMobile。我遇到了这个问题：
只是页眉和页脚之间的内容。在一个内容中有15个列表元素。
当我滚动元素时 - 整个应用程序向上或向下移动...
如何制作那个应用程序是固定的，只滚动了内容？
这个：
- ms-touch-action：none;
帮助，但它不识别滚动然后点击...当我在CSS中滚动此行时，它会打开元素内容...
< div data-role =" page">
< div data-role =" header"数据位= QUOT;固定"> ...< / DIV>
< div data-role =" content" ID = QUOT;试验">
< ul data-role =" listview"数据插图= QUOT;真" ID = QUOT; news_list" class =" list-default list-vendors list-bottom">
< li data-icon =" false"类=&]清单列">
< a href ="＃article">
< div class =" row">
< div class =" title">
< h3> Pervij< / h3>
< span class =" address">< / span>
< / div>
< div class =" side-right">< / div>
< / div>
< / a>
< / li>
< li data-icon =" false"类=&]清单列">
< a href ="＃article">
< div class =" row">
< div class =" title">
< h3> Vtoroj< / h3>
< span class =" address">< / span>
< / div>
< div class =" side-right">< / div>
< / div>
< / a>
< / li>
< li data-icon =" false"类=&]清单列">
< a href ="＃article">
< div class =" row">
< div class =" title">
< h3> Tretij< / h3>
< span class =" address">< / span>
< / div>
< div class =" side-right">< / div>
< / div>
< / a>
< / li>
< li data-icon =" false"类=&]清单列">
< a href ="＃article">
< div class =" row">
< div class =" title">
< h3> Cetvertij< / h3>
< span class =" address">< / span>
< / div>
< div class =" side-right">< / div>
< / div>
< / a>
< / li>
< li data-icon =" false"类=&]清单列">
< a href ="＃article">
< div class =" row">
< div class =" title">
< h3> Pjatij< / h3>
< span class =" address">< / span>
< / div>
< div class =" side-right">< / div>
< / div>
< / a>
< / li>
< li data-icon =" false"类=&]清单列">
< a href ="＃article">
< div class =" row">
< div class =" title">
< h3> Sestoj< / h3>
< span class =" address">< / span>
< / div>
< div class =" side-right">< / div>
< / div>
< / a>
< / li>
< li data-icon =" false"类=&]清单列">
< a href ="＃article">
< div class =" row">
< div class =" title">
< h3> Sedmoj< / h3>
< span class =" address">< / span>
< / div>
< div class =" side-right">< / div>
< / div>
< / a>
< / li>
< li data-icon =" false"类=&]清单列">
< a href ="＃article">
< div class =" row">
< div class =" title">
< h3> Vosmoj< / h3>
< span class =" address">< / span>
< / div>
< div class =" side-right">< / div>
< / div>
< / a>
< / li>
< li data-icon =" false"类=&]清单列">
< a href ="＃article">
< div class =" row">
< div class =" title">
< h3> Pervij< / h3>
< span class =" address">< / span>
< / div>
< div class =" side-right">< / div>
< / div>
< / a>
< / li>
< li data-icon =" false"类=&]清单列">
< a href ="＃article">
< div class =" row">
< div class =" title">
< h3> Vtoroj< / h3>
< span class =" address">< / span>
< / div>
< div class =" side-right">< / div>
< / div>
< / a>
< / li>
< li data-icon =" false"类=&]清单列">
< a href ="＃article">
< div class =" row">
< div class =" title">
< h3> Tretij< / h3>
< span class =" address">< / span>
< / div>
< div class =" side-right">< / div>
< / div>
< / a>
< / li>
< li data-icon =" false"类=&]清单列">
< a href ="＃article">
< div class =" row">
< div class =" title">
< h3> Cetvertij< / h3>
< span class =" address">< / span>
< / div>
< div class =" side-right">< / div>
< / div>
< / a>
< / li>
< li data-icon =" false"类=&]清单列">
< a href ="＃article">
< div class =" row">
< div class =" title">
< h3> Pjatij< / h3>
< span class =" address">< / span>
< / div>
< div class =" side-right">< / div>
< / div>
< / a>
< / li>
< li data-icon =" false"类=&]清单列">
< a href ="＃article">
< div class =" row">
< div class =" title">
< h3> Sestoj< / h3>
< span class =" address">< / span>
< / div>
< div class =" side-right">< / div>
< / div>
< / a>
< / li>
< li data-icon =" false"类=&]清单列">
< a href ="＃article">
< div class =" row">
< div class =" title">
< h3> Sedmoj< / h3>
< span class =" address">< / span>
< / div>
< div class =" side-right">< / div>
< / div>
< / a>
< / li>
< li data-icon =" false"类=&]清单列">
< a href ="＃article">
< div class =" row">
< div class =" title">
< h3> Vosmoj< / h3>
< span class =" address">< / span>
< / div>
< div class =" side-right">< / div>
< / div>
< / a>
< / li>
< / ul>
< / div>
< div data-role =" footer"数据位= QUOT;固定"> ...< / DIV>
< / div>
解决方案
你还有css吗？ withj position fixed，look：
< html>
< head>< title> 我的词汇表 < / title>< / head>
< body>
< div id = " top" >
< a href = " #A" > A < / a> |
< a href = " #B" > B < / a> |
< a href = " #Z" > Z < / a>
< / div> ;
< div id = " term-defs" >
< dl>
< span id = " A" >< / span>
< dt> foo < / dt>
< dd> 这是傻瓜发出的声音 < / dd>
<！ - 依此类推...... - >
< / dl>
< / div>
< / body>
< / html>CSS
＃term-defs {
height ： 300px ;
溢出 ： 滚动; }
#top {
position ： fixed
top ： 0 ;
left ： 0 ;
z - index ： < span class ="pln"> 999 ;
宽度 ： 100 ％;
height ： 23px ;
}看一下这个例子：
w3.org
Hello, i'm developing HTML5 application + jQueryMobile. I faced this issue:
Just header and footer with a content between. In a content there are 15 list elements.
When i scroll the elements - the whole app moves up or down...
How to make that application would be fixed and only content was scrolled?
This:
-ms-touch-action: none;
Helps, but it doesnt recognize scroll and tap then... When i scroll with this row in CSS it opens the elements content...
<div data-role="page">
<div data-role="header" data-position="fixed">...</div>
<div data-role="content" id="test">
<ul data-role="listview" data-inset="true" id="news_list" class="list-default list-vendors list-bottom">
<li data-icon="false" class="list-row">
<a href="#article">
<div class="row">
<div class="title">
<h3>Pervij</h3>
<span class="address"></span>
</div>
<div class="side-right"></div>
</div>
</a>
</li>
<li data-icon="false" class="list-row">
<a href="#article">
<div class="row">
<div class="title">
<h3>Vtoroj</h3>
<span class="address"></span>
</div>
<div class="side-right"></div>
</div>
</a>
</li>
<li data-icon="false" class="list-row">
<a href="#article">
<div class="row">
<div class="title">
<h3>Tretij</h3>
<span class="address"></span>
</div>
<div class="side-right"></div>
</div>
</a>
</li>
<li data-icon="false" class="list-row">
<a href="#article">
<div class="row">
<div class="title">
<h3>Cetvertij</h3>
<span class="address"></span>
</div>
<div class="side-right"></div>
</div>
</a>
</li>
<li data-icon="false" class="list-row">
<a href="#article">
<div class="row">
<div class="title">
<h3>Pjatij</h3>
<span class="address"></span>
</div>
<div class="side-right"></div>
</div>
</a>
</li>
<li data-icon="false" class="list-row">
<a href="#article">
<div class="row">
<div class="title">
<h3>Sestoj</h3>
<span class="address"></span>
</div>
<div class="side-right"></div>
</div>
</a>
</li>
<li data-icon="false" class="list-row">
<a href="#article">
<div class="row">
<div class="title">
<h3>Sedmoj</h3>
<span class="address"></span>
</div>
<div class="side-right"></div>
</div>
</a>
</li>
<li data-icon="false" class="list-row">
<a href="#article">
<div class="row">
<div class="title">
<h3>Vosmoj</h3>
<span class="address"></span>
</div>
<div class="side-right"></div>
</div>
</a>
</li>
<li data-icon="false" class="list-row">
<a href="#article">
<div class="row">
<div class="title">
<h3>Pervij</h3>
<span class="address"></span>
</div>
<div class="side-right"></div>
</div>
</a>
</li>
<li data-icon="false" class="list-row">
<a href="#article">
<div class="row">
<div class="title">
<h3>Vtoroj</h3>
<span class="address"></span>
</div>
<div class="side-right"></div>
</div>
</a>
</li>
<li data-icon="false" class="list-row">
<a href="#article">
<div class="row">
<div class="title">
<h3>Tretij</h3>
<span class="address"></span>
</div>
<div class="side-right"></div>
</div>
</a>
</li>
<li data-icon="false" class="list-row">
<a href="#article">
<div class="row">
<div class="title">
<h3>Cetvertij</h3>
<span class="address"></span>
</div>
<div class="side-right"></div>
</div>
</a>
</li>
<li data-icon="false" class="list-row">
<a href="#article">
<div class="row">
<div class="title">
<h3>Pjatij</h3>
<span class="address"></span>
</div>
<div class="side-right"></div>
</div>
</a>
</li>
<li data-icon="false" class="list-row">
<a href="#article">
<div class="row">
<div class="title">
<h3>Sestoj</h3>
<span class="address"></span>
</div>
<div class="side-right"></div>
</div>
</a>
</li>
<li data-icon="false" class="list-row">
<a href="#article">
<div class="row">
<div class="title">
<h3>Sedmoj</h3>
<span class="address"></span>
</div>
<div class="side-right"></div>
</div>
</a>
</li>
<li data-icon="false" class="list-row">
<a href="#article">
<div class="row">
<div class="title">
<h3>Vosmoj</h3>
<span class="address"></span>
</div>
<div class="side-right"></div>
</div>
</a>
</li>
</ul>
</div>
<div data-role="footer" data-position="fixed">...</div>
</div> 解决方案
Do You uso css withj position fixed, look:
<html> <head><title>My Glossary</title></head> <body> <div id="top"> <a href="#A">A</a> | <a href="#B">B</a> | <a href="#Z">Z</a> </div> <div id="term-defs"> <dl> <span id="A"></span> <dt>foo</dt> <dd>This is the sound made by a fool</dd> <!-- and so on ... --> </dl> </div> </body> </html>CSS
#term-defs { height: 300px; overflow: scroll; }
#top { position: fixed; top: 0; left: 0; z-index: 999; width: 100%; height: 23px; }Look this example:
w3.org
这篇关于HTML5应用程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
