Overflow-x на Android 4.2.2 Браузер сайта

У меня возникла странная проблема в браузере акций на HTC One X под управлением Android 4.2.2.Overflow-x на Android 4.2.2 Браузер сайта

У меня есть контейнер div с переполнением-x, установленный в скрытый и переполненный-y, установленный в auto, он имеет фиксированные размеры ширины и высоты. Детский контент имеет ширину и высоту, превышающую его родительский. Идея состоит в том, что вы должны иметь возможность прокручивать вертикально, но не горизонтально. Каждый браузер, который я видел, ведет себя правильно, и я получаю желаемый эффект. Однако в этом браузере Android Stock я могу свободно перемещаться по горизонтали и вертикально, что не так, как я хочу, поскольку переполнение-x: скрытое должно предотвращать горизонтальную прокрутку.

Я создал codepen демо основную проблему: http://codepen.io/anon/pen/YXjZKR

код здесь:

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1' /> 
    <style> 


    .container{ 
     width: 300px; 
     height: 500px; 
     overflow-x: hidden; 
     overflow-y: auto; 

    } 
    ul.pages { 
     position: relative; 
     margin: 0; 
     padding: 0; 
     white-space: nowrap; 
    } 
    li { 
     width: 300px; 
     line-height: 500px; 
     display: inline-block; 
     margin: 0; 
     padding: 0; 
     vertical-align: top; 
     text-align: left; 
     white-space: normal; 
     height: auto; 
    } 
    li.one { 
     background-color: red; 
    } 
    li.two { 
     background-color: yellow; 
    } 
    li.three { 
     background-color: green; 
    } 
    </style> 
</head> 
<body> 
    <div class="container" id="container"> 
     <ul class="pages"> 
      <li class="one">Hello<br /><br /></li> 
      <li class="two">good</li> 
      <li class="three">bye</li> 
     </ul> 
    </div> 
</body>

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

Проработал часы, пытаясь понять, почему это происходит, и, что более важно, ищет обходное решение, но пока не повезло.

Любая помощь была бы действительно оценена.

Благодаря

источник

2015-07-17 jonboy

Я предполагаю, что <li> элементы установлены на display: inline-block, чтобы скрыть их горизонтально. Если это так, ваша проблема заключается в том, что элемент .container не является родителем <li>.

Фактический родительский элемент - ul.pages - по умолчанию используется overflow: auto. Установите это на overflow-x: hidden, и вы должны быть в порядке.

источник

2015-07-17 10:20:44

Вы правы в том, что элементы 'li' являются' display: inline-block', чтобы скрыть их по горизонтали. Чтобы дать немного больше контекста, каждая 'li' является страницей книги, а' .container' div является «окном просмотра» для текущей видимой страницы. Я не хочу, чтобы пользователи переходили на следующую страницу. Это делается нажатием кнопки. При щелчке элемент 'ul.pages' сдвигается, изменяя его' left' свойство в css, так что следующий элемент li будет виден. Ваше решение установить overflow-x: hidden на 'ul.pages' отключает оставшиеся лики, поэтому они обычно не будут видны при нажатии кнопки. – jonboy

ответ

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