html - outside javascript not work with onsen framewowrk -
i use onsen.ui framework when include script not working how accept include javascript in framework
window.console = window.console || function(t) {};span{ color:red; }<html><head> <meta charset="utf-8"> <title>codepen - navigator</title> <link rel='stylesheet prefetch' href='https://cdn.rawgit.com/onsenui/onsenui/1.3.11/build/css/onsenui.css'> <link rel='stylesheet prefetch' href='https://cdn.rawgit.com/onsenui/onsenui/1.3.11/build/css/onsen-css-components.css'> <script> window.console = window.console || function(t) {}; </script> </head> <body translate="no" > <ons-navigator title="navigator" var="mynavigator"> <ons-page> <ons-toolbar> <div class="center">simple navigation</div> </ons-toolbar> <div style="text-align: center"> <br> <button onclick="scrollwin()">click me scroll horizontally no work!</button><br><br> <script> function scrollwin() { window.scrollto(0, 140); } </script> <span><br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test</span> </div> </ons-page> </ons-navigator> <script src='https://cdn.rawgit.com/onsenui/onsenui/1.3.11/build/js/angular/angular.min.js'></script> <script src='https://cdn.rawgit.com/onsenui/onsenui/1.3.11/build/js/onsenui.min.js'></script> <script> ons.bootstrap(); //# sourceurl=pen.js </script> <script> if (document.location.search.match(/type=embed/gi)) { window.parent.postmessage("resize", "*"); } </script> </body></html>
the problem experiencing not javascript not working rather you're trying scroll wrong element.
onsen ui's ons-page elements create own content element (div.page__content) , used scrolling purposes. can scroll element. not have method scrollto, rather can set scrolltop , scrollleft properties this:
document.queryselector('.page__content').scrolltop = 140; // vertical document.queryselector('.page__content').scrollleft = 140; // horizontal if use scrollwin function fine.
also note - if want use horizontal scrolling should have content wider, can scroll element.
for purpose of snippet inserted following:
<div style="position:absolute;width: 200%;height: 10px;"></div> i think gist of it.
and if want execute when onsen ready - example if want call autoscroll function can do:
ons.ready(function(){ ... }); here modified snippet:
window.console = window.console || function(t) {};span{ color:red; }<html><head> <meta charset="utf-8"> <title>codepen - navigator</title> <link rel='stylesheet prefetch' href='https://cdn.rawgit.com/onsenui/onsenui/1.3.11/build/css/onsenui.css'> <link rel='stylesheet prefetch' href='https://cdn.rawgit.com/onsenui/onsenui/1.3.11/build/css/onsen-css-components.css'> <script> window.console = window.console || function(t) {}; </script> </head> <body translate="no" > <ons-navigator title="navigator" var="mynavigator"> <ons-page> <ons-toolbar> <div class="center">simple navigation</div> </ons-toolbar> <div style="text-align: center"> <br> <button onclick="scrollwin()">click me scroll horizontally no work!</button><br><br> <script> function scrollwin() { document.queryselector('.page__content').scrolltop = 140; // vertical document.queryselector('.page__content').scrollleft = 140; // horizontal } </script> <div style="position:absolute;width: 200%;height: 10px;"></div> <span><br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test</span> </div> </ons-page> </ons-navigator> <script src='https://cdn.rawgit.com/onsenui/onsenui/1.3.11/build/js/angular/angular.min.js'></script> <script src='https://cdn.rawgit.com/onsenui/onsenui/1.3.11/build/js/onsenui.min.js'></script> <script> ons.bootstrap(); //# sourceurl=pen.js </script> </body></html>
Comments
Post a Comment