Мобильная ориентация (пейзаж) полоса прокрутки HTML5/отзывчивая

Я строил отзывчивый сайт и столкнулся с проблемой пейзажами мобильных устройств (точнее, указанного конкретного разрешения (карманный, экран и (мин. -width: 480px))), где полоса прокрутки будет прокручиваться только наполовину вниз по содержимому в прокручиваемом контейнере.Мобильная ориентация (пейзаж) полоса прокрутки HTML5/отзывчивая

Если я попытаюсь прокручивать его дальше, он перескакивает обратно на половину точки и не будет этого делать.

Вот мой CSS:

.Container{ 
margin: 3% 0 0 10%; 
width: 80%; 
} 
.Content{ 
max-height: 80%; 
height: 80%; 
overflow-y: scroll; 
}

и вот HTML:

<div class="Container" style="display: none;"> 
    <div class="Header"> 
     <h5>Help</h5>    
    </div> 
    <div class="Content"> 
     <div class="jqContentdiv"> 
      <p>Lorem ipsum donsequat urna (i've removed the rest of the content to keep this tidy)</p> 
     </div> 
     <div class="userActions"> 
      <a href="#"><p>Close</p></a>              
     </div> 
    </div>  
</div>

jqContentdiv просто контейнер плавал налево.

Это, вероятно, важно отметить, что мобильный Портрет это хорошо, но я заметил, что если вы перечисляете на дно в портрете, а затем переключиться на ландшафт, полоса прокрутки идет на полпути и не пойдет дальше. Я предполагаю, что это как-то связано.

Есть ли у вас кто-нибудь из вас раньше? Любая помощь по этому вопросу была бы весьма признательна.

источник

2013-11-22 Rob Owl

Я решил спуститься по мобильному маршруту JQuery.

<link href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" rel="stylesheet" type="text/css" /> 
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js" type="text/javascript"></script>

Эти включения, css, в частности, исправили мою проблему для меня. Добавление JQuery mobile в существующий проект также добавляет мобильный стиль по всем направлениям. Как я уже стиль это до меня не нужен, что и поэтому я добавил данные-роль = «нет» с JQuery:

$(document).on('pagebeforecreate', function (e) { 
    $("p, input, select, h1, h2, h3, a, span, label, textarea", e.target).attr("data-role", "none"); 
});

ко всем элементам, которые мы не требуем укладок. Все шрифты и прокрутка выглядят намного лучше, и у меня есть варианты для обработки изменений ориентации, которые пригодится.

Спасибо за ваши ответы Bhavesh. Ваше предложение eventlistener привело меня к изменениям ориентации, которые заставили меня принять решение о мобильном решении JQuery.

источник

2013-11-25 08:16:04

Вы пытались использовать iScroll для такого поведения.

Его простота в использовании и в основном используется для мобильных сайтов. Вы можете найти ссылку снизу.

http://cubiq.org/iscroll-4

Это поможет вам для ориентации, а плавно.

источник

2013-11-22 10:33:39

Я стараюсь избегать плагинов как можно больше Bhavesh. Если он дойдет до такой степени, что мне нужно добавить его, тогда я еще раз посмотрю на iScroll. –

Затем вам нужно написать eventListener для изменения размера для окон, где вы меняете ширину и высоту изменения divs –

Проверьте эту ссылку ===== http://stackoverflow.com/questions/12643314/javascript-max-viewport-height- после ориентации с изменением андроид-ИСН –

Мобильная ориентация (пейзаж) полоса прокрутки HTML5/отзывчивая

ответ

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