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>

Solution

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>