не удается заставить iScroll правильно прокрутить div с помощью jQuery Mobile - PullRequest
Новая
       34

не удается заставить iScroll правильно прокрутить div с помощью jQuery Mobile

1 голос
/ 09 февраля 2012

Я использую jQuery Mobile для создания мобильного веб-сайта. На одной странице у меня есть куча текстов для отображения в div. Я кодировал в соответствии с простым примером iScroll 4 .

Я правильно понял в своем браузере Chrome, но, когда я тестирую его в мобильном сафари, я могу немного провести пальцем по тексту, но он отскочит назад, а не прокрутится вниз.

Вот HTML-разметка: 

<div data-role="content">       
        <div class="text-content-wrapper">
            <div id="scroll-wrapper">
                <ul>
                    <li>Content</li>
                    <li>Content</li>
                    <li>Content</li>
                    <li>Content</li>
                </ul>
            </div>
        </div>

и CSS: 

.text-content-wrapper {
width: 80%;
height: 240px;
position: absolute;
left: 35px;
top: 65px;
overflow: auto;
padding: 10px 0;
background-color: white;
opacity: 0.8;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
z-index: 1;
}

#scroll-wrapper ul{
position: absolute;
z-index: 1;
width: 100%;
list-style: none;
text-align: left;
height: 360px;
}

Если я переместу положение: абсолютное значение # scroll-wrapper, оно даже не будет работать в chrome.

И используйте iScroll: 

var myScroll1;
function loaded() {
myScroll1 = new iScroll('scroll-wrapper');
}
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200); }, false);
...