設計右側的默認滾動條

您好我一直在嘗試在最後一小時改變默認滾動條在瀏覽器上的顯示方式。我說的是右側的主滾動條而不是添加一個新滾動條並對其進行設計。使用JScrollPane的插件是，但它似乎沒有工作或我沒有做什麼right.Here是我的代碼：設計右側的默認滾動條

$("window").jScrollPane(); 

window 
{ 
    width: 100%; 

    overflow: auto; 
} 
window 
{ 
    height: auto; 

}

來源

2012-07-31 Nistor Alexandru

見JScrollPane的工作：HTTP：// JScrollPane中。 kelvinluck.com/fullpage_scroll.html – 2012-07-31 09:41:43

什麼是'window'類？沒有稱爲'window'的CSS選擇器。如果您使用'window'，請嘗試使用'html'。 – 2013-04-22 15:22:24

你根本做不到。它曾經可能在IE中，但現在不是幾年。 – 2013-04-22 15:34:04

如果你去website是AK已鏈接，您將看到必需的 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

來源

2013-04-22 15:32:32

設計右側的默認滾動條

回答

相關問題