jQuery将滚动条添加到div

最新推荐文章于 2023-12-07 15:43:57 发布

翻译最新推荐文章于 2023-12-07 15:43:57 发布 · 269 阅读

收录于

当前文章被以下社区和专栏收录：

本文提供了一段jQuery代码，用于在内容超出容器元素时自动显示滚动条。通过计算窗口位置、文档高度、窗口高度等参数来判断是否触发滚动条的显示。

如果内容超出容器元素的面积，则向div中添加滚动条时有用的jquery代码段。对不起，没有演示，只是粘贴到Firebug中。

//D = document
//W = window
//$ = jQuery

var contentArea = $(this),
    wintop = contentArea.scrollTop(),
    docheight = $(D).height(),
    winheight = $(W).height(),
    divheight = $('#content').height(),
    scrollheight = $('#content')[0].scrollHeight,
    scrolltrigger = 0.9;

console.log('wintop ' + wintop);
console.log('docheight ' + docheight);
console.log('winheight ' + winheight);
console.log('divheight ' + divheight);
console.log('scrollheight ' + scrollheight);

console.log((wintop + divheight)/scrollheight);

if  (((wintop + divheight)/scrollheight) > scrolltrigger) {
    // display scroll bar
}

进一步阅读：
http://manos.malihu.gr/jquery-custom-content-scroller
http://jscrollpane.kelvinluck.com/arrows.html

From: https://www.sitepoint.com/jquery-add-scrollbar-div/

标签