javascript no working with onsen.ui

javascript не работает с картой onsen.ui например, я использую javascript для отображения позиции px body whene прокрутки вниз, но не работает и никакого javascript ... когда я удаляю ссылку (ссылка rel = «таблица стилей упреждающей» HREF = «https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.11/build/css/onsenui.css») он работает, но некоторые функции не работают ... Кто-нибудь поможет мне, что я устал от этогоjavascript no working with onsen.ui

<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>

источник

2016-09-25 Anonymous

ваша проблема почти дубликат this one, так что вы можете быть заинтересованный в том, чтобы посмотреть на мой ответ.

Короткая версия:

вам нужно использовать элемент .page__content вместо окна
вы можете получить доступ к его scrollLeft и scrollTop свойства
для прокрутки по горизонтали вам понадобится широкий дочерний элемент
ons.ready для кода инициализации

В ссылочной ссылке вы можете найти более подробное объяснение.

Модифицированный фрагмент кода:

<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>

источник

2016-09-25 20:25:10

Спасибо (llia) помог мне, вопрос в другом также от моего друга .. теперь я хочу, чтобы вы дали мне основание, если используемый (javascript) внешний для (onsen ui) Почему я изменяю –

@mody Я думаю, что ваш комментарий был отрезан случайно. Вы можете увидеть код в фрагменте - вызов 'ons.ready' - это то, где происходит« волшебство ». Что касается того, почему вам нужно использовать (изменить) элемент '.page__content' - это потому, что именно это происходит при использовании пользовательского интерфейса Onsen. И событие прокрутки является исключительным, которое не распространяется на окно, поэтому вы не можете его поймать. Поскольку комментарий был отрезан, я не уверен, что вы имели в виду. Я думаю, что буду афк около 22 часов, поэтому завтра я смогу ответить завтра, если я не смогу ответить должным образом. –

Я не знаю, как поблагодарить вас за большую помощь thanxs llia ... Я имею в виду, если я добавлю еще один раздел (javascript), что правила должны быть изменены .. Например: 1- (окно должно преобразовать в page__content) 2-использование ons-ready() 3- Есть ли другие правила? –

ответ

Смежные вопросы