3

ですから、これは私にとってこのプロジェクトの問題点でした。私がやろうとしているのは、マウスホイールをサポートする水平スクロールWebサイトを作成し、ホイールを使用してXをスクロールすることです。

また、垂直方向にスクロールする幅と高さが設定されたWebサイトまたはコンテンツdivの特定の領域があります（overflow-y：scroll）。マウスを垂直スクロールボックスの上に置いて、その中のコンテンツをスクロールできると理想的です。

Tiny Scrollbar http://baijs.nl/tinyscrollbar/を使用して簡単なデモを作成し、ここで実行しようとしていることを投稿しました。

http://leighmcd.com/slider/demo/

基本的に、ユーザーがオレンジの上にマウスを置いたときに、オレンジのコンテンツボックスに垂直スクロールを表示したいと思います。

私は既存のプラグインをハックするためのJSの知識を制限しているので、アドバイスをいただければ幸いです。

このサイトはIE8+ユーザー向けに構築されています。

4

2 に答える 2

0

Jquery といくつかの Css 調整で Hover Function を使用して、それを実現できます。

HTML

<div id="test">
  Your text goes here...
</div>

CSS

#test
{
  background-color:orange;
  overflow:hidden;
  width:200px;
  height:200px;
}

Jクエリ

$(document).ready(

    function()
    {
    //Note: overflow:auto will bring the V-scroll bar 
    //at the same time overflow:hidden will hide that.
    $("#test").hover(function(){ $(this).css({"overflow":"auto"}); },
    function(){ $(this).css({"overflow":"hidden"}); });
  }

  );

ライブデモ

さらに説明が必要な場合は、こちらをご覧ください。

于 2013-01-14T09:39:28.647 に答える
0

このトピックは面白いと思うので、少し試してみました。プラグインなしで行うのが最も簡単な方法だと思いました。これは、ページを水平にスクロールするための結果のコードです。

// set a block variable if we are over another element that scrolls
// if ie would support e.target for scrolling this wouldn't be needed
var blockScroll = false;
$(".scroller").on("mouseenter mouseleave", function (e) {
  blockScroll = e.type === "mouseenter";
})

function scrollFunc (e) {
  // stop if the target is a .scroller and also
  // if there is an indication that a vertical scroll was done
  if (blockScroll || ("wheelDeltaX" in e && e.wheelDeltaX != 0) || e.shiftKey) return;
  // prevent default scrolling (no jumps)
  e.preventDefault();
  // get ammount of scrolling
  var scroll = "wheelDelta" in e ? -e.wheelDelta : (e.detail * 2);
  // use scroll y for scroll x
  window.scrollBy( scroll, 0 );
}

// try attaching the method like the borwser needs it
// this event isn't covered by jquery so I had to do it manually
if (document.addEventListener) { // W3C sort of
  document.addEventListener( "DOMMouseScroll", scrollFunc, false );
  document.addEventListener( "mousewheel", scrollFunc, false );
} else if (document.attachEvent) { // IE way
  document.attachEvent("onmousewheel", scrollFunc);
} else {
  document.onmousewheel = scrollFunc;
}

注: 独自にスクロールするすべての要素には、scrollerこのコードを持つクラスが必要です。overflow必要に応じて、jquerys を使用して値を取得することもできますが、cssお勧めしません。

これが私の結果です！しかし、私はそこでテストするためのモバイル デバイスを持っていないと言わざるを得ません。このソリューションは、マウス ホイールでのみ機能します。

水平にスクロールする必要がある別の要素がある場合はdocument、私の例の を要素ノードと にwindow.scrollBy置き換えますelement.scrollLeft += -scroll。

また、スクロールは直接行うほどスムーズではないことも付け加えておく必要があるかもしれません。

編集：これをどのように達成できるか、別の考えがあります。ページを垂直にスクロールし、100% のサイズと固定位置で div を配置できます。次に onscroll イベントを使用して、内部 div の水平スクロールを本文の垂直スクロールと同期させます。私はそれがどれほどうまくいくか分かりません。

于 2013-01-14T09:56:47.240 に答える