1

アンチスクロール フレームワークを使用して、Web サイトに Apple のようなスクロールバーを作成しています。フレームワークの詳細については、https ://github.com/LearnBoost/antiscroll を参照してください。

手順に従って、ファイル index.html であるサンプル コードをのぞいてみました。この例を再構築しようとしましたが、Safari および Chrome ブラウザーで動作します。ただし、IE と Firefox では、Apple のようなスクロールバーの下にネイティブのスクロールバーがまだ表示されています:(

何が原因なのかわかりません。ここに JSFiddle を作成しました。

http://jsfiddle.net/BCLE6/2/

<div class="antiscroll-wrap">
<div class="antiscroll-inner huurvoorwaarden-wrapper">
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
</div>
</div>

CSS:

.antiscroll-inner {
    width: 100px;
    height: 100px;
    background-color: #BBB;
}

そして、JSは1行しかありません：

$('.antiscroll-wrap').antiscroll();

フィドルでは、必要なライブラリ (jQuery、antiscroll.js、antiscroll.css、および jquery.mousewheel.js) をインポートしました。

Firefox または IE でフィドルを開くと、問題がはっきりとわかります。なぜこれが起こっているのか、そしてそれを解決するために何ができるのかを誰かが説明してくれますか?

ありがとう！

4

2 に答える 2

1

内側の幅を広げ、ラッパーにオーバーフローを隠すことをお勧めします。

.antiscroll-inner {
  background-color: #bbb;
  height: 100px;
  overflow-x: hidden;
  width: 120px; /** Make 20px larger to extend browser scrollbar outside of wrapper **/
 }

.antiscroll-wrap {
  overflow: hidden; /** Hide overflow **/
  width: 100px; /** Size to what you want, but 20px smaller than inner **/
}
于 2013-08-14T20:43:41.880 に答える
0

内側の div のスクロールバーをカバーするために使用される「antiscroll-wrap」と「antiscroll-inner」の div の間に別の div を追加するだけで済みます。これは彼らの例からのマークアップ構造です:

<div class="box-wrap antiscroll-wrap">
   <div class="box">
      <div class="antiscroll-inner">
         ... 
      </div>
   </div>
</div>

彼らが「ボックス」として分類したdivが欠けているだけです。

于 2014-06-05T18:30:00.583 に答える