gpt4 book ai didi

javascript - 样式化右侧的默认滚动条

转载 作者:行者123 更新时间:2023-11-30 06:40:23 25 4
gpt4 key购买 nike

您好,过去一个小时我一直在尝试更改默认滚动条在浏览器上的显示方式。我说的是右侧的主滚动条没有添加新滚动条并对其进行样式化。我正在使用 jScrollPane 插件,但它似乎不起作用或者我没有做正确的事情。这是我的代码:

$("window").jScrollPane();

window
{
width: 100%;

overflow: auto;
}
window
{
height: auto;

}

最佳答案

如果您转到 website那个 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、jscrollpane.js

关于javascript - 样式化右侧的默认滚动条,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11737022/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com