PhoneGap/Cordova: Предотвращение горизонтальной прокрутки

У меня есть приложение, построенное на Кордове, и на некоторых моих страницах я могу прокручивать по горизонтали из моего содержимого в пустое пространство.PhoneGap/Cordova: Предотвращение горизонтальной прокрутки

Это странно, поскольку у меня ничего нет, что простирается за пределы моего #wrapper, который установлен на width: 100%.

Так что мне было интересно, можно ли вообще отключить горизонтальную прокрутку в приложении?

UPDATE:

Код на странице по запросу:

body { 
    background-color: #fff; 
    font-family:Arial, Helvetica, sans-serif; 
    color: #b7b8b9; 
    height: 100%; 
    width: 100%; 
} 

iframe{ 
    border: none; 
    width: 100%; 
    /*margin-top: 50px;*/ 


    } 

#header{ 
    height: 50px; 
    width: 100%; 
} 


<body> 
     <div id="wrapper"> 
     <div id="header"> 
      <div class="headerback"><a href="index.html">Home</a></div> 
      <div class="headerrefresh"><script>var pathname = window.location.pathname;</script><script>document.write('<a href="'+pathname+'">Refresh</a>')</script></div> 
      <div class="headertitle"><h2>Get the Look</h2></div> 

     </div><!--HEADER--> 
    <iframe src="http://www.mbff.com.au/getthelook"></iframe> 
    </div> 
    </body>

This is what happens on horizontal scroll

источник

2012-06-26 MeltingDog

Прокрутка из содержимого эффекта отскока? – nhahtdh

@nhahtdh нет, он ведет себя так, как будто div выходит за пределы обертки - его просто прокручивается в белое пространство немного – MeltingDog

Я не могу воспроизвести проблему на устройстве. Можете ли вы опубликовать скриншот? – nhahtdh

Try отлаживать страницы в Chrome (WebKit) с точными размерами вашего устройства. Это решает большинство проблем с рендерингом для меня.

Я не знаю конкретной проблемы здесь, но похоже, что один из ваших элементов течет вне обертки. Например, вы можете попробовать это в css:

div.wrapper { overflow: hidden; width: inherit; }

Хотя это может быть лучшей идеей, чтобы выяснить, почему ваша страница расширяется по горизонтали?

источник

2012-07-04 09:36:43

Да, спасибо Юстусу. Это была некорректная ширина тела на моем специфичном для iphone CSS – MeltingDog

Подтверждено это исправление с помощью Cordova 6.3.1, работающее на Android 6 и 7 –

// Phone Gap disable only horizontal scrolling in Android. 

// Add this code in your Phone Gap Main Activity.Initially Declare the variable 

private float m_downX; 

//Then add this code after loadUrl 

this.appView.setOnTouchListener(new View.OnTouchListener() { 
    public boolean onTouch(View v, MotionEvent event) { 

     switch (event.getAction()) { 
      case MotionEvent.ACTION_DOWN: { 
       // save the x 
       m_downX = event.getX(); 
      } 
      break; 

      case MotionEvent.ACTION_MOVE: 
      case MotionEvent.ACTION_CANCEL: 
      case MotionEvent.ACTION_UP: { 
       // set x so that it doesn't move 
       event.setLocation(m_downX, event.getY()); 
      } 
      break; 
     } 
     return false; 
    } 
});

источник

2012-09-25 07:39:59

Большое вам спасибо! –

Попробуйте добавить следующий код в ваш файл .html:

document.body.addEventListener('touchmove', function(event) { 
    event.preventDefault(); 
}, false);

источник

2013-03-26 18:37:53 Gustus

Это предотвратило даже вертикальную прокрутку. –

как удалить этот lsitener после этого я попробовал removeeventlistener, но все же его не прокрутка –

Я искал для решения этой проблемы в течение длительного времени. Наконец-то я решил это следующим образом. я установил стиль для body и html теги:

position: fixed; 
width: 100%; 
height: 100%; 
overflow: hidden;

После того, что я добавил div к body и установить стиль для него:

overflow-y: auto; 
height: 100%;

Итак, я получил фиксированное тело, которое содержит div с вертикальной полосой прокрутки.

источник

2015-07-09 14:19:17

Для полноты картины, я думал, что ответ, который использует официальный метод ведения такой вещи через preference тег должен быть добавлен:

<preference name="DisallowOverscroll" value="true"/>

Поддерживается Android и IOS в соответствии с documentation.

По умолчанию: ложные

значение ИСТИНА, если вы не хотите, чтобы интерфейс для отображения какой-либо обратной связи, когда пользователи уехало за начало или конец содержимого. На iOS жесты перепросаживания заставляют контент возвращаться в исходное положение. на Android, они производят более тонкий светящийся эффект вдоль верхнего или нижнего края содержимого.

источник

2017-07-13 13:35:32 Script47

Примечание: в техническом смысле это правильно, но некоторые люди могут испытывать очень малую переброску (в моем случае это был один пиксель) и [ этот ответ] (https://stackoverflow.com/a/31320257/2374365) работал с этим –

PhoneGap/Cordova: Предотвращение горизонтальной прокрутки

ответ

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