iScroll не показывает полосу прокрутки, но позволяет перетаскивать содержимое - PullRequest
Новая
       12

iScroll не показывает полосу прокрутки, но позволяет перетаскивать содержимое

2 голосов
/ 17 ноября 2011

Вот как я это называю 

document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200); }, false);

/**/
$(document).ready(function() {
    //Created an array for adding n iScroll objects
    var myScroll = new Array();

    $('.content').each(function(){
        if($(this).attr('id')==null){
            $(this).attr('id') = $(this).attr('class');
        }
        id = $(this).attr('id');
        console.log(id);
        $(this).html('<div class="scroller">'+$(this).html()+'</div>');
        myScroll.push(new iScroll(id));
    });
});

Я немного изменил его, чтобы вы могли использовать его с классом, а не только с идентификатором.

Кажется, что это работает (будет включено), потому что я могу перетащить контейнер и его содержимое (, но он не сохранит позицию , он восстановит при отпускании мыши )

Если вы хотите, чтобы это произошло, перейдите на страницу http://toniweb.us/grano и щелкните любой элемент в меню, новый показанный эффект.

Есть идеи, почему это работает, но не так, как ожидалось?

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

CSS: 

#nvl1{
    padding:0px 25px;
    z-index:10;
    position:absolute;
    left:0px;
    background:url("../img/fondoNivel2.jpg") no-repeat scroll right 0 #79797B ; 
    height:100%;
}



#nvl1 .content{
        width:650px;
        z-index:11;
        display:none;
        color:#6666b6b;
        position:relative;
        line-height:30px;
    }

Ответы [ 4 ]

4 голосов
/ 26 ноября 2011

Я посмотрел ваш код на: http://toniweb.us/grano

Я думаю, что вы хотели бы использовать iScroll в своем классе с "прокруткой". Это не то, что вы делаете в следующем коде, но вместо этого вы фактически настраиваете iScroll для использования родительского элемента прокрутки DIV: 

id = $(this).attr('id');
$(this).html('<div class="scroller">'+$(this).html()+'</div>');
myScroll.push(new iScroll(id));

Для справки: iScroll использует идентификатор, а не класс

Эффект, который он имеет, заключается в том, что он вызывает эффект «привязки» к элементу, непосредственно следующему за уровнем блока - вашему DIV прокрутки.

Рассмотрим этот пример, где есть DIV (id = "scroller"), содержащий OL, который содержит несколько LI (уровня блока):

http://cubiq.org/dropbox/iscroll4/examples/simple/

Короче говоря, присвойте своему DIV идентификатор класса скроллера и вместо этого создайте iScroll.

0 голосов
/ 29 декабря 2011

Элементы в элементе прокрутки не могут быть плавающими.Если они плавают и не очищены, поток страницы будет означать, что ваша прокрутка div не является правильной высотой.Старайтесь избегать любых перемещений в пределах прокрутки и div и посмотрите, как это происходит.Это было проблемой для меня.

Я также нашел ответ Мэтьюса полезным, так как я также вызывал iscroll на неверном div.Я думаю, что запутанная вещь в примере iScroll заключается в том, что легко предположить, что iScroll вызывается в div с помощью ID-скроллера, но он вызывается в div-обертке.DIV с ID-скроллером на самом деле не нуждается в ID, и я думаю, что для примера это будет яснее без этого.например, 

<div id="wrapper">
    <div>
         <p>Whatever you want here</p>
         <ul>
             <li>1</li>
         </ul>
    </div>
</div>
...
myScroll = new iScroll('wrapper');
0 голосов
/ 23 ноября 2011

Разве вы просто не хотите: 

.content {overflow-y:scroll;}

Разве это не то, что вы говорите, приятель?

0 голосов
/ 17 ноября 2011

если вы установите style для тега div, на который вы установите скроллер (пример) 

style="position:relative;overflow: hidden;height:350px;

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

...