没有溢出的可滚动div：自动？答案

【问题标题】：Scrollable div without overflow:auto?没有溢出的可滚动div：自动？
【发布时间】：2008-12-16 04:19:17
【问题描述】：

在我的应用程序中，我有 2 个 div，其中一个有很长的产品列表，可以拖到另一个 div（购物车）中。产品 div 有溢出，但它破坏了原型可拖动元素。原型 hack 非常突兀，并不兼容所有浏览器。

所以我采取了不同的方法，是否可以在不使用 CSS overflow:auto 的情况下拥有一个可滚动的 div？

【问题讨论】：

标签： javascript prototypejs scriptaculous

【解决方案1】：

有一个 css 属性来控制它。

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

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

【讨论】：

标题说“没有溢出：自动”，抱歉，这正是溢出：滚动的意思。

【解决方案2】：

您可以使用内容大于其窗口的框架。不过可能会让传递 JS 事件变得困难。

【讨论】：

【解决方案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({});

}

重要提示：

z-index 重复
请注意'starteffect' 末尾的容器样式丢失。光标和宽度只是为了保持拖动用户友好。

希望对你有帮助。

【讨论】：