カスタム矢印ボタンを Nicescroll スクリプトにリンクして、誰かが上/下ボタンをクリックしたときにスクロールが発生するようにしたいと思います (既存のキープレスとマウスホイールのスクロール機能に加えて)。
どうすればこれを行うことができるかについてのアイデアはありますか? (jqueryが苦手ですみません)
ありがとう
カスタム矢印ボタンを Nicescroll スクリプトにリンクして、誰かが上/下ボタンをクリックしたときにスクロールが発生するようにしたいと思います (既存のキープレスとマウスホイールのスクロール機能に加えて)。
どうすればこれを行うことができるかについてのアイデアはありますか? (jqueryが苦手ですみません)
ありがとう
この質問への回答は少し遅れていますが、これは他の人にとって役立つ可能性があります。
これは、 nicescrollが使用されているコンテナーのスクロールトップを変更することで実現できます。Nicescroll はスクロールバーを自動的に変更するので、心配する必要はありません。
例えば:
$(ARROW).click(function () {
$(SCROLLCONTAINER).scrollTop($(SCROLLCONTAINER).scrollTop() + 50);
});
ユーザーが押し続けているときにスクロールを続けたい場合は、keydown を使用して scrolltop の値を間隔で変更し、keyup 時にその間隔をクリアすることができます。
お役に立てれば。
少し遅れていることはわかっていますが、同じ問題の解決策を探していたところ、最終的にこれになりました。私の場合は完全に機能しました。
var scrolled=0;
jQuery("#scroll-down").on("click" , function(){
scrolled=scrolled+100;
jQuery("#main").animate({
scrollTop: scrolled
});
});
jQuery("#scroll-up").on("click" , function(){
scrolled=scrolled-100;
jQuery("#main").animate({
scrollTop: scrolled
});
});
#scroll-down、#scroll-up、および #main を独自の ID に置き換えます。100 を変更すると、クリックごとにスクロールする距離を調整できます
niceScroll オブジェクトで次の行を見つけます。
rail.append(cursor);
そしてそれを置き換えます:
var cursor_wrapper = $(document.createElement('div'));
cursor_wrapper.css({width: '100%', height: '100%'});
cursor_wrapper.addClass('cursor-wrapper');
rail.append(cursor_wrapper);
cursor_wrapper.append(cursor);
次に、css を追加します。
.nicescroll-rails{
background: url('../img/scroll-top-arrow.png') no-repeat center top;
}
.cursor-wrapper{
background: url('../img/scroll-bottom-arrow.png') no-repeat center bottom;
cursor: pointer;
}
これは最善の解決策ではありませんが、垂直スクロールで機能します...