Прокручиваемый div без переполнения: авто?

Question

В моем приложении у меня есть 2 div, один с длинным списком продуктов, которые можно перетащить в другой div (корзина). У div продукта есть переполнение, но он разбивает перетаскиваемые элементы прототипа. Взлом прототипов очень навязчив и не совместим со всеми браузерами.

Так что я использую другой подход, возможно ли иметь прокручиваемый div без использования CSS overflow:auto?

Answer 1

Theres свойство css для управления этим.

<div style="width:100px;height:100px;overflow:scroll">
</div>

http://www.w3schools.com/Css/pr_pos_overflow.asp

Answer 2

Вы можете использовать фрейм с содержимым, превышающим его окно. Хотя это может затруднить прохождение событий JS.

Answer 3

Вот что я написал, чтобы он работал под IE 8.0.6 и Firefox 3.6.3:

Сделать перетаскиваемые элементы (с рамкой) в контейнере "width:100px;scrollable:auto":

function makeDraggable(container,tag) {

    if(!container || !tag) { return false; }
    $(container).select(tag).each( function(o) {
      new Draggable(o,{
        starteffect: function(e){makeDragVisible(container,e);},
        endeffect: function(e){e.setStyle({'position':'','width':'','cursor':''});},
        zindex: 1000
        // , revert: ... // the other options
      });
    });

}

function makeDragVisible(container,element) {

    if(!container || !element) { return false; }
    var i=$(container).getStyle('width');
    i=i.replace('px','');
    i=Math.round(i-20)+'px';
    element.setStyle({'width':i,'z-index':1000,'position':'absolute','cursor':'move'});
    // 
    $(container).setStyle({});

}

Важные примечания:

1. z-индекс повторяется
2. обратите внимание на потерю стиля контейнера в конце 'starteffect'. Курсор и ширина просто для удобства перетаскивания.

Надеюсь, это поможет.