Заработать вложенную div закручивать для мобильного сайта

StackOverflow https://stackoverflow.com/questions/8840200

Вопрос

Можно ли создать закрученную вложенную div на мобильном сайте JQUERY? В основном я хочу, чтобы фиксированный заголовок и нижний колонтитул, но средняя секция была прокручиваемой. Я попытался установить переполнение: прокрутка (и я установил ширину и высоту DIV), но он, похоже, не работает правильно в моем симуляторе iOS. (Я бы сделал jsfiddle, но это не работает для мобильных материалов jQuery)

Вот HTML:

<body> 
<div data-role="page">
   <div data-role="header">
   <div id="header_image">
      <img src="images/top_logo.png" />
   </div>
   </div><!-- /header -->
       <div id="content_bg">
       <div data-role="content">
        <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
   </div><!-- /content -->
   </div><!-- /content_bg -->
   <div data-role="footer" data-theme="b">
   <div id="footer_text">
      <center><h4>Page Footer</h4></center>
   </div><!-- /footer_text -->
   </div><!-- /footer -->
   </div><!-- /page -->

Вот соответствующий CSS:

#content_bg{
    background-color:#0038a5;
    height:310px;
    width:100%;
    text-size:11px;
    color:white;
    overflow: scroll;
    }

Спасибо за любой свет, который вы можете сиять на этой проблеме!

Это было полезно?

Решение

Существует много решений, в том числе: iscroll, FlexScroll, эксперимент JQuery Scrollview и другие (те, которые я успешно использовал).

Я нашел FlexScroll самым простым для настройки, и все они примерно одинаково.

iscroll 4 -> http://cubiq.org/iscroll-4 (Убедитесь, что вы расследуете lite Версия, поскольку он имеет меньший код и все еще выполняет основные функции)

FlexScroll -> http://www.hesido.com/web.php?page=customscrollbar (Мне нравится это, это оригинальная цель - создать пользовательские полосы прокрутки, но он поддерживает события прикосновения для прокручиваемых областей на мобильных устройствах)

jQuery Mobile Scrollview -> http://jquerymobile.com/test/experiments/scrollview/ (Создан мобильной командой jQuery)

ОБНОВИТЬ

Я ответил на ряд вопросов, связанных с ISCROLL на StackOverflow, вот ссылка на их просмотр (в случае вы сталкиваетесь с проблемами, используя ISCROLL): https://stackoverflow.com/search?q=user%3A752738+%5Bjquery-mobile%5D+iscroll&submit=search

Другие советы

Iscroll - это ваше решение. Проверьте его веб -сайт

http://cubiq.org/iscroll-4

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top