设置右侧默认滚动条的样式

Styling the default scrollbar on the right

本文关键字：样式 滚动条 默认 设置      更新时间：2024-05-12

嗨，在过去的一个小时里，我一直在尝试更改浏览器上默认滚动条的外观。我说的是右边的主滚动条没有加载新的滚动条并阻碍它。我正在使用jScrollPane插件，但它似乎不起作用，或者我做得不对。这是我的代码：

$("window").jScrollPane();
window
{
    width: 100%;
    overflow: auto;
}
window
{
    height: auto;
}

如果你访问A.K.链接的网站，你会看到必要的Jquery和CSS。我让你更容易理解它们。

$(function()
{
    var win = $(window);
    // Full body scroll
    var isResizing = false;
    win.bind(
        'resize',
        function()
        {
            if (!isResizing) {
                isResizing = true;
                var container = $('#full-page-container'); //this should be the most parent
                // div, right beneath the <body> and covering the entire page. Change the ID HERE.
                // Temporarily make the container tiny so it doesn't influence the
                // calculation of the size of the document
                container.css(
                    {
                        'width': 1,
                        'height': 1
                    }
                );
                // Now make it the size of the window...
                container.css(
                    {
                        'width': win.width(),
                        'height': win.height()
                    }
                );
                isResizing = false;
                container.jScrollPane( //this is where outer scroll changes
                    {
                        'showArrows': true
                    }
                );
            }
        }
    ).trigger('resize');
// Workaround for known Opera issue which breaks demo (see
// http://jscrollpane.kelvinluck.com/known_issues.html#opera-scrollbar )
$('body').css('overflow', 'hidden');
// IE calculates the width incorrectly first time round (it
// doesn't count the space used by the native scrollbar) so
// we re-trigger if necessary.
if ($('#full-page-container').width() != win.width()) {
    win.trigger('resize');
}
/*Internal scrollpanes. (Not needed if you want to change only the outer)
$('.scroll-pane').jScrollPane({showArrows: true});
*/
});

现在CSS：

html
{
    overflow: auto;
}
#full-page-container
{
    overflow: auto;
}
/*** Optional INNER scrolls. 
.scroll-pane
{
    width: 100%;
    height: 200px;
    overflow: auto;
}
.horizontal-only
{
    height: auto;
    max-height: 200px;
}
***/

不要忘记包含Jquery、jscrollpane.css、mousewheel.js、jscroll pane.js

相关文章：