如何将jscrollpane与kendo控件集成

Question

我正在使用kendo UI splitter。我想自定义滚动条，这就是我尝试使用“jscrollpane”的原因。我已定义为

<div id ="splitter" style="height:680px;">
   <div id="leftPane" style='height:670px;'></div>
   <div id="rightPane"></div>
</div> 

脚本

 <script type="text/javascript">
    $(document).ready(function () {
        $("#splitter").kendoSplitter({
            panes: [
                        { collapsible: false, size: "55%" },
                        { collapsible: true, size: "45%"}],
            orientation: "horizontal"
        });
    });
</script>

我已将jscrollpane定义为

$('#leftPane').jScrollPane() 
                       .bind('mousewheel', function (e) {
                           e.preventDefault(); 
                       }
              );

有了这个，我无法显示自定义滚动条。你能帮我解决这个问题吗？

Answer 1

试试这个，

查看

<div id="splitter">
    <div id="leftPane">
        <p>
            Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus
            ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum
            non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.</p>
        <p>
            In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam
            ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget
            molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis
            sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla
            porta ligula egestas tincidunt. Nullam risus magna, ornare vitae varius eget, scelerisque
            a libero. Morbi eu porttitor ipsum. Nullam lorem nisi, posuere quis volutpat eget,
            luctus nec massa. Pellentesque aliquam lacinia tellus sit amet bibendum. Ut posuere
            justo in enim pretium scelerisque. Etiam ornare vehicula euismod. Vestibulum at
            risus augue. Sed non semper dolor. Sed fringilla consequat velit a porta. Pellentesque
            sed lectus pharetra ipsum ultricies commodo non sit amet velit. Suspendisse volutpat
            lobortis ipsum, in scelerisque nisi iaculis a. Duis pulvinar lacinia commodo. Integer
            in lorem id nibh luctus aliquam. Sed elementum, est ac sagittis porttitor, neque
            metus ultricies ante, in accumsan massa nisl non metus. Vivamus sagittis quam a
            lacus dictum tempor. Nullam in semper ipsum. Cras a est id massa malesuada tincidunt.
            Etiam a urna tellus. Ut rutrum vehicula dui, eu cursus magna tincidunt pretium.
            Donec malesuada accumsan quam, et commodo orci viverra et. Integer tincidunt sagittis
            lectus. Mauris ac ligula quis orci auctor tincidunt. Suspendisse odio justo, varius
            id.</p>
        <p>
            Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis
            porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper,
            magna diam porttitor mauris, quis sollicitudin sapien justo in libero. Vestibulum
            mollis mauris enim. Morbi euismod magna ac lorem rutrum elementum. Donec viverra
            auctor lobortis. Pellentesque eu est a nulla placerat dignissim. Morbi a enim in
            magna semper bibendum. Etiam scelerisque, nunc ac egestas consequat, odio nibh euismod.</p>
    </div>
    <div id="rightPane">
    </div>
</div>

<强>脚本

<script type="text/javascript">
    $(document).ready(function () {
        $("#splitter").kendoSplitter({
            panes: [
                        { collapsible: false, size: "55%" },
                        { collapsible: true, size: "45%"}]
        });

        $('#leftPane').jScrollPane().bind('mousewheel', function (e) {
            e.preventDefault();
        });
    });
</script>

<强>的CSS

<style type="text/css">
    #leftPane
    {
        overflow: auto !important;
        height: 200px;
        width: 100%;
    }
</style>