Блог

Главная - Вопросы по программированию - Получение положения прокрутки на мобильном телефоне / устройстве

Получение положения прокрутки на мобильном телефоне / устройстве

#javascript #mobile #scroll

#javascript #Мобильный #прокрутка

Вопрос:

Я хочу заставить мобильное устройство прокручивать до определенной позиции, а затем выводить ее в виде предупреждения. Мой код отлично работает в Chrome на моем ПК, но не на мобильных устройствах. Когда я запускаю инструменты разработчика в Chrome на своем ПК и выбираю просмотр на мобильных устройствах, он не работает, хотя он отлично работает в режиме просмотра на ПК. Если я установлю положение, скажем, на 30 пикселей, экран вообще не перемещается в режиме просмотра с мобильного устройства, и предупреждение возвращается с нулевым значением. Что я делаю не так?

 <!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link href="//fonts.googleapis.com/css?family=Open Sans:400,400i,300,700" rel="stylesheet" type="text/css">
<script src="crafty/crafty_postcode.class.js"></script> 
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>    
<script type="text/javascript" src="https://cc-cdn.com/generic/scripts/v1/cc_c2a.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"> 
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"> 
</script>
</head>
<body id="mainBodyId" style="margin-left:0.25cm;height: 1500px;width:1200px;"  >'

<script  language="JavaScript" type="text/javascript"> 
window.scrollTo(0,30);
alert('Current scroll from the top: '   window.pageYOffset);
</script>

<form>
<span>
    1<br>2<br>3<br>4<br>5<br>6<br>6<br>7<br>8<br>9<br>10<br>1<br>2<br>3<br>4
    <br>5<br>6<br>6<br>7<br>8<br>9<br>10<br>1<br>2<br>3<br>4<br>5<br>6<br>6<br>7
    <button>test</button>
    <br>8<br>9<br>10<br>1<br>2<br>3<br>4<br>5<br>6<br>6<br>7<br>8<br>9<br>10<br>
    1<br>2<br>3<br>4<br>5<br>6<br>6<br>
    <button>test</button>
    1<br>2<br>3<br>4<br>5<br>6<br>6<br>7<br>8<br>9<br>10<br>1<br>2<br>3<br>4<br>
    5<br>6<br>6<br>7<br>8<br>9<br>10<br>1<br>2<br>3<br>4<br>5<br>6<br>6<br>7<br>
    8<br>9<br>10<br>1<br>2<br>3<br>4<br>5<br>6<br>6<br>7<br>8<br>9<br>10<br>1<br>
    2<br>3<br>4<br>5<br>6<br>6<br>7<br>8<br>
    <button>test</button>
    <br>10<br>1<br>2<br>3<br>4<br>5<br>6<br>6<br>7<br>8<br>9<br>10<br>1<br>2<br>3
    <br>4<br>5<br>
    <button>test</button>
    6<br>6<br>7<br>8<br>9<br>10<br>1<br>2<br>3<br>4<br>5<br>6<br>6<br>7<br>8<br>
    9<br>10<br>1<br>2<br>3<br>4<br>5<br>6<br>6<br>7<br>8<br>9<br>10<br>1<br>2<br>
    3<br>4<br>5<br>6<br>6<br>7<br>8<br>9<br>10<br>1<br>2<br>3<br>4<br>5<br>6<br>6
    <br>7<br>8<br>9
    <button>test</button>
    <br>10<br>1<br>2<br>3<br>4<br>5<br>6<br>6<br>7<br>8<br>9<br>10<br>1<br>2<br>
    3<br>4<br>5<br>6<br>6<br>7<br>8<br>9<br>10<br>
    <button>test</button>
</span>
</form>
</body>
</html>

Я ожидаю, что экран переместится на 30 пикселей по вертикали, а предупреждение будет выводиться на 30 в Chrome developer tools, просмотр с мобильного устройства.

Ответ №1:

Попробуйте это вместо window.scrollTo(0, 30) 

 window.addEventListener('load', function(){
   window.scrollTo(0,30);
});

Комментарии:

1. Ваше предложение работает в режиме просмотра на рабочем столе (в инструментах разработчика), но не тогда, когда я переключаюсь на просмотр в режиме мобильного устройства.

2. Привет, @JamesCurrie, я обновил код, и он работает и на мобильном устройстве. Я не уверен, почему это не работает с chorme mobile view, но я протестировал это на реальном мобильном устройстве, и это точно работает.