3

できるだけ具体的に、ここに行きます...円の中にサブナビゲーションを実装しようとしていますが、コンテンツは形状に適合しており、この問題を修正するにはスクロールバーが必要です。

CSSを機能させようとしたにもかかわらず、問題が発生しました。現在、サブナビゲーションのスクロールバーは円の外側に垂直にスクロールし、コンテンツが表示されているようです。

以下のスクリーングラブを参照してください。サブナビゲーションコンテンツがdivから高すぎて、スクロールバーがはるかに下にスクロールしています。理想的には、コンテンツを強調表示された赤い領域内に配置し、スクロールバーを青のように配置したいと思います。

スクリーングラブ

スクロールバーのCSS(.jb_scrollbar):

.jb_scrollbar { clear: both; margin: 0px 0 10px;}
.jb_scrollbar .viewport { overflow: hidden; position: relative; }
.jb_scrollbar .overview { list-style: none; position: absolute; left: 0; top: 0; }
.jb_scrollbar .thumb .end,
.jb_scrollbar .thumb { margin: 50px 0 0 0; background-color: #ccc; }
.jb_scrollbar.scroll_y .scrollbar { position: relative; float: right; width: 10px;}
.jb_scrollbar.scroll_x .scrollbar { position: relative; height: 15px;clear:both;margin:0 0 5px;}
.jb_scrollbar.scroll_y .track { height: 100%; width:13px; position: relative; padding: 0 1px;}
.jb_scrollbar.scroll_x .track { width: 100%; height:7px; position: relative; padding: 1px 0px;}
.jb_scrollbar.scroll_y .thumb { height: 20px; width: 13px; cursor: pointer; overflow: hidden; position: absolute; top: 0; background: #d5d089;}
.jb_scrollbar.scroll_x .thumb { height: 13px; cursor: pointer; overflow: hidden; position: absolute; left: 0; background: #d5d089;}
.jb_scrollbar.scroll_y .thumb .end { overflow: hidden; height: 5px; width: 13px; background: #d5d089;}
.jb_scrollbar.scroll_x .thumb .end { overflow: hidden; width: 5px; height: 0px; background: #d5d089;}
.jb_scrollbar .disable{ display: none;}

サブナビゲーションのCSS(#vertmenu):

#vertmenu { font-family: Arial, Helvetica, sans-serif; font-size: 100%; width: 221px; height: 221px; background: url(../images/subnav_bg.png) no-repeat; margin-top: 20px; float: left;  clear: both;}
#vertmenu a.nav-path-selected{ color:#000; border-bottom: 2px solid #23b3e9; margin-bottom: -2px; }
#vertmenu a:hover{ color:#000; border-bottom: 2px solid #23b3e9; margin-bottom: -2px; }
#vertmenu ul { list-style: none; margin: 40px 0 50px 10px; border: none; float:left; height: 150px; width: 130px; }
#vertmenu ul li { margin: 0px; padding: 3px 0 3px 14px; clear: both; background: url(../images/subnav_bullet_bg.png) no-repeat left center; }
#vertmenu ul li a { font-size: 14px; line-height: 14px; text-transform: none; display: block; text-decoration: none; color: #000000;}

あなたがとても親切に私が問題を見つけるのを手伝ってくれるなら、それは非常にありがたいです。何年もの間、CSSを正しく配置するために、CSSに頭をかいてきました。

どうもありがとう

4

1 に答える 1

1

そのスクロールバープラグインでそれを行う方法はわかりませんが、CSSのみを使用した簡単なデモがあります:http://jsbin.com/icelih/4/edit

プラグインはインラインスタイルでサイズを設定し、ボイラープレートマークアップのかなりの部分を必要とするようです。私は(紛らわしい)ドキュメントを調べて、サイトのどの部分とプラグインによって挿入/必要な部分を確認する必要がありました。

そこで、代わりに、サイトを修正するために使用できる分離されたモックアップを作成しました:http: //jsbin.com/ilebaz/1/edit

于 2012-10-10T21:55:59.853 に答える