javascript - 带有 iframe 的 jQuery 自定义内容滚动插件 - 可能是 CSS 问题

Question

我一直在尝试使用 Malihu jQuery custom content scroller plugin .

我已经设法根据插件提供的演示让一些东西正常工作，但是当我尝试使它适应我现有的代码时，我遇到了问题。我认为它与 css 中的高度、宽度和溢出属性有关。我一直在玩弄它们，但一无所获。

如果有人可以帮助确定工作示例和损坏示例之间的区别，那就太好了。

---

工作示例:http://jsfiddle.net/XYd7G/

损坏的示例:http://jsfiddle.net/tKnz7/2/ - 我可以用它来替换滚动条，但它似乎没有检测到溢出。

损坏的 iFrame 示例:http://fiddle.jshell.net/4gyDL/2/

http://jsfiddle.net/7NgG8/4/ - 除了替换内容滚动条外，我正在尝试创建与此完全相同的内容。

---

JS

$(".content").mCustomScrollbar({
        autoHideScrollbar:true,
        theme:"light-thin"
    });

---

工作示例的 HTML + CSS:

HTML

<h1>iframe demo</h1>
    <!-- content block -->
    <div class="content">
        <iframe src="http://slipsum.com/" scrolling="no" width="100%" height="1000" frameborder="0">
            <p>Your browser does not support iframes.</p>
        </iframe>
    </div>

CSS

body
{
    margin:0; 
    padding:0; 
    color:#eee; 
    background:#222; 
    font-family:Verdana,Geneva,sans-serif; 
    font-size:13px; 
    line-height:20px;
}

.content{margin:40px; width:1040px; height:500px; overflow:auto;}

---

损坏示例的相关 HTML + CSS:

HTML

<div id="sidebar" class="open">
        <div class="nav">
                <div class="tr">
                        <div class="top">
                                <ul>
                                    <li class="link"><img src="_images/attributes/user.svg"></li>
                                    <li class="link"><img src="_images/attributes/contribute.svg"></li>
                                    <li class="link"><img src="_images/attributes/attribute2.svg"></li>
                                    <li class="link"><img src="_images/attributes/attribute2.svg"></li>
                                    <li class="link"><img src="_images/attributes/attribute2.svg"></li>
                                    <li class="link"><img src="_images/attributes/attribute2.svg"></li>
                                </ul>
                        </div>
                </div>
                <div class="tr">
                        <div class="middle">
                        </div>
                </div>
                <div class="tr">
                        <div class="bottom">
                                <ul>
                                    <li class="link"><img src="_images/attributes/attribute2.svg"></li>
                                    <li class="link"><img src="_images/attributes/attribute2.svg"></li>
                                    <li class="link"><img src="_images/attributes/attribute2.svg"></li>
                                    <li class="link"><img src="_images/attributes/attribute2.svg"></li>
                                    <li class="current"><img src="_images/attributes/attribute2.svg"></li>
                                </ul>
                        </div>
                </div>
        </div>
        <div class="content">
            <iframe src="http://fiddle.jshell.net/4gyDL/2/show/" scrolling="no" frameborder="0"></iframe>
            </ul>
        </div>
</div>

<div id="dummy-column"></div>

CSS

html, body {height:100%; margin:0; padding:0;}
#sidebar {
    position:fixed;
    top:0;
    bottom:0;
    overflow:auto;
    width: 20em;
    z-index:2;
    color: #ffffff;
    background-color: #303030;
    -moz-box-shadow: inset -30px 0 30px -10px #222;
    -webkit-box-shadow: inset -30px 0 30px -10px #222;
    box-shadow: inset -30px 0 30px -10px #222;
    -webkit-transition:margin 1s ease-in;
    -moz-transition:margin 1s ease-in;
    -ms-transition:margin 1s ease-in;
    transition:margin 1s ease-in;
    white-space: nowrap;
}


.nav{
    display:table;
    height:100%;
    table-layout:fixed;
    width:3em;
    float: right;
    background-color: #2a2a2a;
    border-left: 2px groove #454545;    
    -moz-box-shadow: inset -10px 0 10px -10px #000;
    -webkit-box-shadow: inset -10px 0 10px -10px #000;
    box-shadow: inset -10px 0 10px -10px #000;
}

/* iframe stuff is here */

.content {
    height:100%;
    position: fixed;
    width: 16.875em;
    float: right;
    display:inline-block;
    color:#eee;
    font-family: "Georgia", Sans-Serif;
    overflow-y: auto;
    overflow-x: hidden;
}

.content iframe{
    width: 100%;
    height: 100%;
}

/* end of iframe stuff */

---

iframe HTML:

<div id="sidebar">

        <div class="content">
            <p class="title">MISSION CONTROL</p>
            <ul>
                <li class="heading">Recent Changes</li>
                <li class="sub-menu"><ul>
                    <li>Content Sub-Menu</li>
                    <li>Content Sub-Menu</li>
                    <li>Content Sub-Menu</li>
                </ul></li>
                <li class="heading">Formatting</li>
                <li class="sub-menu"><ul>
                    <li>Content Sub-Menu</li>
                    <li>Content Sub-Menu</li>
                    <li>Content Sub-Menu</li>
                </ul></li>
                <li class="heading">Categorise</li>
                <li class="sub-menu"><ul>
                    <li>Content Sub-Menu</li>
                    <li>Content Sub-Menu</li>
                    <li>Content Sub-Menu</li>
                </ul></li>
                <li class="heading">Categorise</li>
                <li class="sub-menu"><ul>
                    <li>Content Sub-Menu</li>
                    <li>Content Sub-Menu</li>
                    <li>Content Sub-Menu</li>
                </ul></li>
            </ul>
        </div>
</div>

iframe CSS:

html, body { margin:0; padding:0; height:100%}
#sidebar {
    text-align: center;
    width: 16.875em;
    color: #ffffff;
    background-color: #333333;
}


.content {
    width: 16.875em;
    display:inline-block;
    color:#fff;
}

Answer 1

将 y - 滚动条放在 i-frame 内部内容中 然后使用

  overflow-x:hidden;
  overflow-y:hidden;

我在 http://jsfiddle.net/tKnz7/4/ 做了一个简化的例子

我无法让 Malihu scroller 插件在 jsfiddle.net 上运行，问题已投票。