mody mody - 2 months ago 21
CSS Question

javascript no working with onsen.ui

javascript do not working with onsen.ui framework
for example i use javascript to show position px body whene scroll down but no working and any javascript... when i remove link (link rel='stylesheet prefetch' href='https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.11/build/css/onsenui.css')
he working but Some features not working ... Anyone help me I'm tired of this



<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 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>
window.console = window.console || function(t) {};
</script>

<script>
window.addEventListener("scroll", function(event) {

var top = this.scrollY,
left = this.scrollX;

var horizontalScroll = document.querySelector(".horizontalScroll"),
verticalScroll = document.querySelector(".verticalScroll");

horizontalScroll.innerHTML = "Scroll X: " + left + "px";
verticalScroll.innerHTML = "Scroll Y: " + top + "px";
document.getElementById("input1").value=verticalScroll.innerHTML =top;

}, false);

</script>



</head>

<body translate="no" >

<ons-navigator title="Navigator" var="myNavigator">
<ons-page>
<ons-toolbar>
<div class="center">Simple Navigation</div>
</ons-toolbar>
<br><br>
<div class="wrapper" style="position:fixed;">
<div class="horizontalScroll">Scroll (x,y) to </div>
<div class="verticalScroll">see me in action</div>

</div>
<p>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br></p>
</ons-page>
</ons-navigator>

<script>
ons.bootstrap();

</script>
<script>
if (document.location.search.match(/type=embed/gi)) {
window.parent.postMessage("resize", "*");

}
</script>

</body>
</html>




Answer

Your problem is almost a duplicate of this one, so you may be interested in looking at my answer there.

The short version is:

  • you need to use an element .page__content instead of window
  • you can access its scrollLeft and scrollTop properties
  • to scroll horizontally you need some wider child element
  • use ons.ready for initialization code

In the referenced link you can find a more detailed explanation.

Modified snippet:

<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 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>
  window.console = window.console || function(t) {};
</script>

      <script>
        
ons.ready(function(){
  var content = document.querySelector('.page__content');
  var horizontalScroll = document.querySelector(".horizontalScroll");
  var verticalScroll = document.querySelector(".verticalScroll");

  content.addEventListener("scroll", function(e) {
horizontalScroll.innerHTML = "Scroll X: " + content.scrollLeft + "px";
verticalScroll.innerHTML = "Scroll Y: " + content.scrollTop + "px";
  });
});
      </script>
        

    
  </head>

  <body translate="no" >

    <ons-navigator title="Navigator" var="myNavigator">
  <ons-page>
    <ons-toolbar>
      <div class="center">Simple Navigation</div>
    </ons-toolbar>
<br><br>
<div class="wrapper" style="position:fixed;">
    <div class="horizontalScroll">Scroll (x,y) to </div>
    <div class="verticalScroll">see me in action</div>
    
</div>

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

<p>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br></p>
  </ons-page>
</ons-navigator>

        <script>
      ons.bootstrap();

    </script>
    <script>
  if (document.location.search.match(/type=embed/gi)) {
    window.parent.postMessage("resize", "*");
      
  }
</script>

  </body>
</html>

Comments