6

次のチュートリアルを使用して、Webページのデフォルトのスクロールバーを変更しようとしています：http：
//manos.malihu.gr/jquery-custom-content-scroller/

問題は、ページ全体ではなく、特定のdivタグ内に配置したコンテンツのスクロールバーが変更されることです。たとえば、このデモでは、スクロールバーは変更されていますが、ページ全体は変更されていません。誰かが、コンテンツの特定のブロックだけでなく、ページ全体のスクロールバーを変更するのを手伝ってくれませんか。

4

2 に答える 2

6

使用しているスタイルは#content_1divにのみ適用されています（mCustomScrollbarコードを調べるときにクラスを参照してください）。あなたが投稿したチュートリアルによると：

ファイルを含めた後、カスタムスクロールバーを追加する要素でmCustomScrollbar関数を呼び出します。

したがって、ページ全体に適用する場合は、そのdivで呼び出す代わりに、本文で呼び出す必要があります。

$("body").mCustomScrollbar();

編集：
開発者のページから、彼はそれが特に機能しないとコメントしてbodyいますが、本体の代わりにコンテナdivを使用して同じことを行うことができます。

于 2013-01-20T16:58:32.477 に答える
1

多分誰かにとってそれはまだ実際です。したがって、解決策は次のとおりです。

$(function()
{
	var win = $(window);
	var isResizing = false;
	win.bind(
		'resize',
		function()
		{
			if (!isResizing) {
				isResizing = true;
				var container = $('#full-page-container');
				container.css(
					{
						'width': 1,
						'height': 1
					}
				);
				container.css(
					{
						'width': win.width(),
						'height': win.height()
					}
				);
				isResizing = false;				
			}
		}
	).trigger('resize');

        $('body').css('overflow', 'hidden');

	// IE Tweak
	if ($('#full-page-container').width() != win.width()) {
		win.trigger('resize');
	}

        $('#full-page-container').mCustomScrollbar({
            theme: "dark",
            scrollbarPosition: "inside",
            scrollInertia: 300,
            snapAmount: 50,
            scrollButtons: { 
                enable: true
            },
            contentTouchScroll: true,
            scrollEasing:"easeOutCirc",              
            autoDraggerLength:true,               
            advanced:{  
                updateOnBrowserResize:true,   
                updateOnContentResize:true   
            }
        });
});
*{
  margin: 0;
  padding: 0;
}

body {
  overflow: hidden;
  background-color: #f1f1f1;
}

#full-page-container
{
  overflow: hidden;
}

.container{
  width: 700px;
  height: 1200px;              
}

.main-content{              
  height: 1200px;              
}

.content{
  width: 250px;
  height: 200px;
  margin: 0 auto;                
  margin-bottom: 10px;
  background-color: #0066cc;
}
<!DOCTYPE html>
<html>
    <head>
        <title>mCustomScrollBar</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.0.9/jquery.mCustomScrollbar.min.css">
      </head>
  <body>
    <div id="full-page-container">
      <div class="container">            
        <div class="main-content">
            <div class="content">Content</div>
            <div class="content">Content</div>
            <div class="content">Content</div>
            <div class="content">Content</div>
            <div class="content">Content</div>
            <div class="content">Content</div>
            <div class="content">Content</div>
        </div>
      </div>
    </div>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.0.9/jquery.mCustomScrollbar.concat.min.js"></script>

于 2015-09-19T16:04:59.750 に答える