This は私が使用したリファレンスで、スクロールバーを非表示にしてdivをスクロール可能にする方法を説明しています。唯一の違いは、divがネストされていることです。私の fiddle を確認してください
HTML:
_<div id="main">
<div id="sub-main">
<div id="content">
<div id="item-container">
<div class="item">a</div>
<div class="item">b</div>
<div class="item">c</div>
</div>
</div>
</div>
</div>
_
CSS:
_#main {
width: 500px;
height: 500px;
}
#sub-main {
width: 500px;
height: 500px;
overflow: hidden;
}
#content {
background-color: red;
width: 500px;
height: 500px;
overflow: auto;
}
#item-container {
width: 1500px;
height: 500px;
}
.item {
width: 500px;
height: 500px;
font-size: 25em;
text-align: center;
float: left;
}
_
上記のように、オーバーフローした水平divがあり、そのスクロールバーを非表示にします。それ以外の場合は$.scrollTo()
が機能しないため、スクロール可能にする必要があります。
UPDATE:
すべての回答を読みましたが、まだ問題を解決しておらず、何が原因なのかわかりません。これが問題を抱えているライブです。基本的に、私は this をほぼ同じようにしようとしていますが、私のWebサイトが期待どおりに機能しない理由がいくつかあるに違いありません。 2つの問題があります。
overflow: hidden
_をスクロール可能なアイテムの親コンテナに設定すると、スクロールできません(ネイティブJavaScriptスクロール関数も機能しません)。$.localScroll({ target: '#projects-content' })
でターゲットを設定することで実行できますが、ターゲットを設定しても何もスクロールしません。そうしないと、_overflow:hidden
_が適用されていない限り、スクロールは機能します。繰り返しますが、どんな助けも大歓迎です。HTML:
_<div id="projects"> <!-- start of entire projects page -->
<div id="project-sidebar">
<a href="#project-first">
<div class="sidebar-item sidebar-first">first</div>
</a>
<a href="#project-second">
<div class="sidebar-item sidebar-second">second</div>
</a>
<a href="#">
<div class="sidebar-item sidebar-third">third</div>
</a>
</div>
<div id="project-content"> <!-- this must be the scrollable itmes' container, not the entire window -->
<div id="project-first" class="project-item">
<!-- these items should be scrollable -->
<div class="project-subitem" id="first-sub1">
<a href='#first-sub2' class='next'>next</a>
</div>
<div class='project-subitem' id='first-sub2'>
<a href='#first-sub1' class='prev'>prev</a>
</div>
<!-- end of scrollable items -->
</div>
</div> <!-- end of scroll scroll container -->
</div> <!-- end of entire projects page -->
<script>
// FIXME: when I set target, nothing scrolls.
// But I don't want the entire window to scroll
$('#projects').localScroll({
//target: '#project-content',
hash: false
});
</script>
_
[〜#〜] css [〜#〜]
_#project-content {
width: 80%;
height: 100%;
position: relative;
float: left;
}
#project-sidebar {
float: left;
width: 20%;
height: 100%;
}
.project-item {
width: 300%;
height: 100%;
}
.project-subitem {
height: 100%;
width: 33.33%;
position: relative;
float: left;
}
_
更新:
_overflow:scroll
_を_#project-content
_に追加した後、スクロールは期待どおりに機能します。 _#project-content
_でスクロールバーを非表示にするだけです。 _overflow:hidden
_をその親に追加しようとしましたが、成功しませんでした。また、_html, body
_に追加しようとしましたが、ドキュメント全体がscrollTop()
などのスクロール機能を受け入れません。
どんな助けも大歓迎です!
テクニックは、スクロールバーを持つ子要素よりも短い親コンテナを使用することです。この画像は私が意味するものを示しています:
あなたの場合、#project-content
に絶対位置と負のボトム値を使用することをお勧めします。そのため、ボトムの親コンテナ(#projects
)がオーバーフローします。
ポイントは今、どのような負の値ですか?スクロールのwithと同じ値にする必要がありますただしスクロールバーはブラウザーによって同じ幅になることはありません。そのため、より大きな値:-30px
を指定して、確実に非表示にすることをお勧めします。細いスクロールバーを備えたブラウザで非表示にできるコンテンツを最下部近くに配置しないように注意する必要があります。
これは、Webサイトに追加する必要があるCSSです。
#projects{
position: relative;
}
#project-content{
position: absolute;
top: 0;
left: 20%;
bottom: -30px;
/* remove:
height: 100%;
position: relative;
float: left;
padding-bottom: -15px
/*
}
scollbarは約20pxを占めるため、スクロール可能なdivを20pxより高く、20pxより広くすると、スクロールバーが非表示になります。
#content {
background-color: red;
width: 520px;
height: 520px;
overflow: auto;
}
それは一種の不正行為ですが、#content
このように [〜#〜] demo [〜#〜]
#content {
background-color: red;
width: 500px;
height: 480px;
overflow: hidden;
}
#item-container {
width: 1500px;
height: 500px;
overflow: scroll;
}
スクロール可能なすべてのコンテナを知っている場合は、CSSと少しのJSでスクロールバーを非表示にできます。 Webkitベースのブラウザー(safari、google chrome、opera)の場合、スクロールバーの幅を0に設定するのはCSSのみのソリューションです。IE、Firefox、およびその他の非Webkitブラウザーの場合、負のマージンとして使用されるスクロールバーの幅を計算する必要があります。スクロール可能なコンテンツに最適です。
そのためには、コンテンツをoverflow-y:scroll
でdivにラップし、常に垂直スクロールバーを表示し、margin-right:-17px
と親overflow:hidden
でこのスクロールバーを非表示にする必要があります。例は here です。固定幅や高さを設定する必要はありません。
これは jQuery Scrollbar で使用された方法です。水平スクロールバーの非表示はより複雑で、コンテンツの変更を処理してコンテナの高さを再計算する必要があります。
水平スクロールでコンテンツ自体を作成するソリューション。
#mainと#contentの高さを増やすだけです。
#main {
width: 500px;
height: 520px;
}
#sub-main {
overflow: hidden;
}
#content {
background-color: red;
width: 500px;
height: 520px;
overflow: auto;
}
#item-container {
width: 1500px;
height: 500px;
overflow: hidden;
}
.item {
width: 500px;
height: 500px;
font-size: 25em;
text-align: center;
float: left;
}
基本的に、padding:0 1em 1em 0;
を非表示にする要素に追加します。これにより、親にオーバーフローがある場合、両方のスクロールバーが非表示になります。そのうちの1つだけを非表示にする場合は、padding-bottom
またはpadding-right
のみを調整します。
1emは、ほとんどのブラウザのスクロールバーの平均幅です。 http://jsfiddle.net/5GCsJ/912/
http://manos.malihu.gr/jquery-custom-content-scroller/
私はjQueryとあなたの例を大雑把に使用してこれを行いました
これを確認してください fiddle :
スクロールホイールの方向を検出し、jQueryで水平スクロールバーを押しただけです。
$(document).ready(function(){
$('#content').bind('mousewheel', function(e){
var curScroll = $("#content").scrollLeft();
if(e.originalEvent.wheelDelta > 0) {
$("#content").scrollLeft(curScroll-500);
} else {
$("#content").scrollLeft(curScroll+500);
}
});
});
スクロールする500pxの量などの値をハードコーディングしたため、「粗野」です。スクロールする量を動的に検出するために、さらにJavaScriptを記述することができます。また、wheelDeltaの値が、あなたや他のユーザーにとって、アップで+120、ダウンで-120になるかどうかはわかりません。
また、scrolLeft()をアニメーション化して、スムーズなトランジションを実現できることにも注意してください。