YUI scrollviewを利用して、タッチ、フリック、矢印によるメニュー構築を行いました。しかし、なぜか矢印にはバグがあります。
ページが初めて読み込まれると正常に動作しますが、ユーザーがマウスまたはスワイプ (タブレットまたは電話) でページをスクロールするとすぐに、矢印が機能しなくなります。コンテンツをスワイプすると、矢印が魔法のように動き出し、再び機能します。
これは、scrollView に使用するスクリプトです。
YUI().use('scrollview-base', 'scrollview-paginator', function(Y) {
var scrollView = new Y.ScrollView({
id: "scrollview",
srcNode : '#clientslider-content',
width : 950,
flick: {
minDistance: 10,
minVelocity: 0.3,
axis: "x"
}
});
scrollView.plug(Y.Plugin.ScrollViewPaginator, {
selector: 'li'
});
scrollView.render();
var content = scrollView.get("contentBox");
var scrollViewCurrentX = $('#clientslider-content').offset();
content.delegate("click", function(e) {
var scrollViewNewX = $('#clientslider-content').offset();
var scrollMarginL = (scrollViewNewX.left-2);
var scrollMarginR = (scrollViewNewX.left+2);
if (scrollViewCurrentX.left < scrollMarginL || scrollViewCurrentX.left > scrollMarginR)
{
e.preventDefault();
}
}, ".clientlink");
content.delegate("mousedown", function(e) {
scrollViewCurrentX = $('#clientslider-content').offset();
e.preventDefault();
}, "a, img");
Y.one('#clientslider-next').on('click', Y.bind(scrollView.pages.next, scrollView.pages));
Y.one('#clientslider-prev').on('click', Y.bind(scrollView.pages.prev, scrollView.pages));
});
ここでデモを見つけることができます: http://www.circlesoftware.nl/demo/test.html
再現するには: - ページをロードします - 右ボタンを押します (他に何もしないでください) - マウスで下にスクロールします - 矢印が壊れています 修正するには: - スライダーのコンテンツをつかみ、スワイプします - 左または右を試しますボタンを押すと、再び機能します
ここで何が問題なのか誰にもわかりませんか?