Question

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

我已经设法根据插件提供的演示获得一些工作但是当我尝试将其调整到我现有的代码时，我遇到了问题。我认为它与css中的高度，宽度和溢出属性有关。我一直在和他们一起玩，但我无处可去。

如果有人可以帮助确定工作示例与破坏的工作示例之间的差异。

破碎示例：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卷轴插件在jsfiddle.net上运行，问题得到了提升。

使用iframe的jQuery自定义内容滚动插件 - 可能是CSS问题

1 个答案: