Skip to content

Instantly share code, notes, and snippets.

@dmachi

dmachi/scroll.html

Created April 22, 2011 02:51
Show Gist options
  • Save dmachi/935919 to your computer and use it in GitHub Desktop.
Save dmachi/935919 to your computer and use it in GitHub Desktop.
Download ZIP
scrollbar approximation
Raw
scroll.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>EdgeToEdgeDataList</title>
<link href="../themes/iphone/base.css" rel="stylesheet">
<link href="../themes/iphone/TabBar.css" rel="stylesheet"></link>
<script type="text/javascript" src="../../../dojo/dojo.js" djConfig="async:false, parseOnLoad: false,enableViewController:true" ></script>
<script language="JavaScript" type="text/javascript">
require(["dojo","dijit","dojox","dojox/mobile/parser","dojox/mobile","dojox/mobile/View","dojox/mobile/Heading","dojox/mobile/RoundRectCategory","dojox/mobile/RoundRectList","dojox/mobile/ListItem","dojox/mobile/viewController","dojox/mobile/EdgeToEdgeDataList","dojo/data/ItemFileWriteStore"], function(dojo,dijit,dojox){
dojo.ready(function(){
var static_data = {
items: [
{label: "Apple", moveTo: "dummy"},
{label: "Banana", moveTo: "dummy"},
{label: "Cherry", moveTo: "dummy"},
{label: "Grape", moveTo: "dummy"},
{label: "Kiwi", moveTo: "dummy"},
{label: "Lemon", moveTo: "dummy"},
{label: "Melon", moveTo: "dummy"},
{label: "Orange", moveTo: "dummy"},
{label: "Peach", moveTo: "dummy"},
{label: "aApple", moveTo: "dummy"},
{label: "aBanana", moveTo: "dummy"},
{label: "aCherry", moveTo: "dummy"},
{label: "aGrape", moveTo: "dummy"},
{label: "aKiwi", moveTo: "dummy"},
{label: "bApple", moveTo: "dummy"},
{label: "bBanana", moveTo: "dummy"},
{label: "bCherry", moveTo: "dummy"},
{label: "bGrape", moveTo: "dummy"},
{label: "bKiwi", moveTo: "dummy"},
{label: "cApple", moveTo: "dummy"},
{label: "cBanana", moveTo: "dummy"},
{label: "cCherry", moveTo: "dummy"},
{label: "cGrape", moveTo: "dummy"},
{label: "cKiwi", moveTo: "dummy"},
{label: "dApple", moveTo: "dummy"},
{label: "dBanana", moveTo: "dummy"},
{label: "dCherry", moveTo: "dummy"},
{label: "dGrape", moveTo: "dummy"},
{label: "dKiwi", moveTo: "dummy"},
{label: "eApple", moveTo: "dummy"},
{label: "eBanana", moveTo: "dummy"},
{label: "eCherry", moveTo: "dummy"},
{label: "eGrape", moveTo: "dummy"},
{label: "eKiwi", moveTo: "dummy"}
]
};
var store1 = new dojo.data.ItemFileWriteStore({url: "settings.json", clearOnClose: true});
var store2 = new dojo.data.ItemFileWriteStore({data: dojo.clone(static_data)});
dojo.global.store = store1;
var newItems = [[],[]];
// switch to the selected store
function switchTo(store){
window.store = store;
dijit.byId("list").setStore(store);
}
// add a new item
function add1(){
var item = store.newItem({label: "New Item", moveTo: "dummy"});
this.newItems[(store == store1) ? 1 : 0].push(item);
}
// delete the added item
function delete1(){
var item = this.newItems[(store == store1) ? 1 : 0].pop();
if(item){
store.deleteItem(item);
}
}
dojox.mobile.parser.parse();
var scrollBar = dojo.create("div", {style: {width: "14px", width: "14px", height: "10px", overflow: "hidden", 'float':'left', position: "relative", display: "none", border: "1px solid gray"}},dojo.body());
var innerScroll = dojo.create("div",{style:{position:"absolute", margin:"1px",width: "12px", background: "gray", overflow: "hidden"}},scrollBar);
function showScrollBar(node){
var coords = dojo.coords(node);
var scrollHeight = node.scrollHeight;
var scrollTop = node.scrollTop;
console.log("scrollHeight: " + scrollHeight + " top: " + scrollTop);
dojo.style(scrollBar, "display", "");
console.log("coords: " + coords.w + " : " + coords.h + " :: " + coords.l + " : " + coords.t + " :: " + coords.x + " : " + coords.y);
var top = coords.y;
var left = coords.l + coords.w;
console.log("scrollbar coords: " + top + ":" + left);
dojo.style(scrollBar, {
"height": coords.h + "px",
"top": top,
"left": left
});
console.log("innerScroll height: "+((scrollHeight-coords.h/scrollHeight)*100)+"%");
dojo.style(innerScroll, {
height: parseInt((coords.h/scrollHeight)*100) + "%",
"top": scrollTop
});
}
function updateScrollBar(node){
console.log("update scrollbar: " + node.scrollTop);
dojo.style(innerScroll, {
"top": node.scrollTop
});
}
function hideScrollBar(){
dojo.style(scrollBar, "display", "none");
}
dojo.connect(dojo.doc, "touchstart", function(e){
console.log('touchstart'+e.touches[0] + ":"+e.targetTouches[0]);
if(e.touches.length>1){return;}
var scrollTarget = null;
var cur = e.target;
var safety=20;
while(safety>0 && !scrollTarget && cur){
safety--;
if (cur && cur.nodeName!="BODY"
&& cur.style && (dojo.style(cur,"overflow") == "auto")){
var coords = dojo.coords(cur);
//console.log("nodeCoords: " + coords.h + " w: " + coords.w + " scroll: "+ cur.scrollHeight);
if (cur.scrollTop>0 || cur.scrollHeight > coords.h){
scrollTarget=cur;
break;
}
}else{
cur = cur.parentNode;
}
}
var lastPageX,lastPageY;
if (scrollTarget){
e.preventDefault();
showScrollBar(scrollTarget);
var moveHandle = dojo.connect(dojo.doc,"touchmove", function(e){
console.log("scroll target is: " + scrollTarget.id);
e.preventDefault();
if (!lastPageY){
lastPageY=e.touches[0].pageY;
}
var yDistance = e.touches[0].pageY + lastPageY;
var curTop = scrollTarget.scrollTop;
var space = scrollHeight - coords.h
scrollTarget.scrollTop = curTop + (.75 * yDistance);
console.log("yDistance: " + yDistance + " curTop: " + curTop + " : " +scrollTarget.scrollTop);
//setTimeout(function(){updateScrollBar(scrollTarget)},1);
});
var stopHandle = dojo.connect(dojo.doc,"touchend", function(e){
dojo.disconnect(stopHandle)
dojo.disconnect(moveHandle);
hideScrollBar();
});
}
});
});
});
</script>
</head>
<body>
<div id="foo" style="margin:25px;width:400px;height:300px;border 1px green gray;overflow:auto;">
<ul dojoType="dojox.mobile.EdgeToEdgeDataList" id="list" store="store" query="{label: '*'}"></ul>
<p>show the different set:<br>
<input type="button" value="Set1" onclick="switchTo(store1)">
<input type="button" value="Set2" onclick="switchTo(store2)">
<p>alter the object store:<br>
<input type="button" value="Add" onclick="add1()">
<input type="button" value="Delete" onclick="delete1()">
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment