Outside Javascript Not Work With Onsen Framewowrk

June 28, 2022 Post a Comment

i am use onsen.ui framework but when i include any script he do not working how i do accept include javascript in the framework

Solution 1:

The problem you are experiencing is not that the javascript is not working but rather you're just trying to scroll the wrong element.

Onsen UI's ons-page elements create their own content element (div.page__content) and that is used for scrolling purposes. So you can just scroll that element. However it does not have a method scrollTo, rather you can just set the scrollTop and scrollLeft properties like this:

document.querySelector('.page__content').scrollTop = 140; // for vertical
document.querySelector('.page__content').scrollLeft = 140; // for horizontal

If you use this for your scrollWin function you will be fine.

Also note - if you want to use horizontal scrolling you should have some content which is wider, so that you can actually scroll the element.

For the purpose of the snippet I inserted the following:

<div style="position:absolute;width: 200%;height: 10px;"></div>

I think you get the gist of it.

And finally if you want to execute something when onsen is ready - for example if you want to call your autoscroll function you can do:

ons.ready(function(){ ... });

Here is your 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 to scroll horizontally no work!</button><br><br>
                  <script>
function scrollWin() {
    document.querySelector('.page__content').scrollTop = 140; // for vertical
    document.querySelector('.page__content').scrollLeft = 140; // for 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>

JavaScript Guy

Outside Javascript Not Work With Onsen Framewowrk

Solution 1:

Post a Comment for "Outside Javascript Not Work With Onsen Framewowrk"