JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.2.716/js/kendo.all.min.js"></script>
<div data-role="view" id="viewMain" data-show="mainView.show" data-stretch="false">
<div id="foo">test
<div >main content</div>
<div id="bar" data-role="scroller">
<div id="scroller-content">
<span id='cw_67' >WASHINGTON</span> <span id='cw_68' >The</span>
<span id='cw_69' >Federal</span> <span id='cw_70' >Reserve</span> <span id='cw_71' >chairman,</span> <span
id='cw_72' >Ben</span> <span id='cw_73' >S.</span> <span id='cw_74' >Bernanke,</span> <span id='cw_75'
>said</span> <span id='cw_76' >on</span> <span id='cw_77' >Wednesday</span> <span id='cw_78' >that</span> <span
id='cw_79' >the</span> <span id='cw_80' >central</span> <span id='cw_81' >bank</span> <span id='cw_82'
>intended</span> <span id='cw_83' >to</span> <span id='cw_84' >reduce</span> <span id='cw_85' >its</span> <span
id='cw_86' >monetary</span> <span id='cw_87' >stimulus</span> <span id='cw_88' >later</span> <span id='cw_89'
>this</span> <span id='cw_90' >year</span> <span id='cw_91' >and</span> <span id='cw_92' >end</span> <span
id='cw_93' >the</span> <span id='cw_94' >bond</span> <span id='cw_95' >purchases</span> <span id='cw_96'
>entirely</span> <span id='cw_97' >by</span> <span id='cw_98' >the</span> <span id='cw_99' >middle</span> <span
id='cw_100' >of</span> <span id='cw_101' >next</span> <span id='cw_102' >year</span> <span id='cw_103'
>if</span>...
CSS
<style>
#foo {
background: red;
display: -webkit-box;
-webkit-box-orient: vertical;
}
#bar {
-webkit-box-flex: 2;
overflow: hidden;
min-height: 1px; /* trigger overflow */
background: blue;
color:white;
}
#baz {
-webkit-box-flex: 1;
}
#scroller-content {
height:200px;
}
</style>
JavaScript
$(function() {
// log.info('add listeners');
//document.addEventListener("deviceready", onDeviceReady, true);
// window.addEventListener("load", onDeviceReady);
// are we running in native app or in browser?
window.isphone = false;
if(document.URL.indexOf("http://") == -1) {
window.isphone = true;
}
if(window.isphone) {
document.addEventListener("deviceready", onDeviceReady, false);
} else {
onDeviceReady();
}
});
var mainView=function(){
return{
show:function(){
console.log('view show');
}
,
goToSpan: function(){
var spanNumber=$("#goToSpanValue").val();
console.log($("#goToSpanValue"));
var scroller = $("#bar").data("kendoMobileScroller");
console.log(scroller);
var scrollTarget=$("#cw_" + spanNumber);
console.log(scrollTarget);
scroller.scrollTo(0,0);
if (scrollTarget.length>0){
console.log('scrollTarget',scrollTarget);
console.log('$("#bar").offset().top',$("#bar").offset().top);
console.log('scrollTarget.offset().top', scrollTarget.offset().top);
var scrollY = scrollTarget.offset().top-$("#bar").offset().top ;
alert('scrollY',scrollY);
$('#status').html('span found!');
scroller.scrollTo(0,-scrollY);
}
else
{
$('#status').html('could not find span no:'+spanNumber);
}
}
}
}()
function onDeviceReady() {
window.app = new kendo.mobile.Application();
kendo.bind($("#viewMain"),mainView);
};