私は、ユーザーが簡単な水平スクロールバーを使ってナビゲートできるサイドスクロール要素を持っています。しかし、私は2つの写真のように前後に動かすために側面にいくつかのボタンを追加し、アニメーション化したいと思います。水平スクロールバーのように機能するボタンを作成するにはどうすればよいですか？
私はJQueryに慣れていませんが、これは可能でしょうか？スクロールバーは技術的にはDOMの一部ではなく、実際にはブラウザの一部ですが、それと対話する方法はありますか？
すなわち
あなたが右にスクロールする場合は、このための方法がないこの.scrollLeft(-100)がために魔法を行うことができますので、あなたの左の位置200に要素をスクロールするjQueryの$('.elm').scrollLeft(200)を使用することができた場合について要素を右にスクロールします。 jQueryの.scrollLeft()についての詳細情報については
は、このリンクをたどる：https://api.jquery.com/scrollleft/
私はあなたのための基本的なデモを書き、それが役に立つことを願っています。 http://codepen.io/anon/pen/EKoVOj?editors=0010
index.htmlを
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Horizontal Scroll Demo</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
<button class="scroll-btn scroll-to-left" type="button">←</button>
<p>Suspendisse faucibus, nunc et pellentesque egestas, lacus ante convallis tellus, vitae iaculis lacus elit id tortor. Etiam vitae tortor. Vivamus laoreet. Cras dapibus. Nam pretium turpis et arcu. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut tincidunt tincidunt erat. Donec venenatis vulputate lorem. Vestibulum facilisis, purus nec pulvinar iaculis, ligula mi congue nunc, vitae euismod ligula urna in dolor. Phasellus gravida semper nisi. Morbi vestibulum volutpat enim. Curabitur a felis in nunc fringilla tristique. Phasellus accumsan cursus velit. Praesent venenatis metus at tortor pulvinar varius. Fusce risus nisl, viverra et, tempor et, pretium in, sapien. Sed in libero ut nibh placerat accumsan. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. In hac habitasse platea dictumst. Curabitur a felis in nunc fringilla tristique. Curabitur suscipit suscipit tellus. Donec mollis hendrerit risus. Sed lectus. Sed fringilla mauris sit amet nibh. Praesent ac massa at ligula laoreet iaculis.</p>
<button class="scroll-btn scroll-to-right" type="button">→</button>
</div>
<script src="script.js"></script>
</body>
</html>
のstyle.css
div {
background: tomato;
color: white;
font-size: larger;
font-family: Calibri;
margin: 50px auto;
padding: 20px 20px 10px;
overflow-x: scroll;
height: 160px;
width: 500px;
position: relative;
}
div > p {
margin: 0;
width: 1500px;
}
.scroll-btn {
background: lightblue;
color: blue;
border: none;
padding: 2px 10px;
font-size: xx-large;
position: fixed;
top: 0;
}
.scroll-btn:hover {
background: blue;
color: lightblue;
cursor: pointer;
}
.scroll-btn.scroll-to-left { left: 0; }
.scroll-btn.scroll-to-right { right: 0; }
script.js：デモリンク作業
$(function() {
'use strict';
var scrollingValue = 30;
var scrollbarPosition = 10;
function getMaxChildWidth(elm) {
var childrenWidth = $.map($('>*', elm), function(el) { return $(el).width() });
var max = 0;
for (var i = 0; i < childrenWidth.length; i++) {
max = childrenWidth[i] > max ? childrenWidth[i] : max;
}
return max;
}
function getScrollingValue(toLeft, ctx) {
if (toLeft) {
return scrollbarPosition < 1 ? 0 : scrollingValue;
}
return scrollbarPosition >= getMaxChildWidth(ctx) ? 0 : scrollingValue;
}
$('.scroll-btn.scroll-to-left').on('click', function() {
$(this).parent().scrollLeft(
scrollbarPosition -= getScrollingValue(true, $(this).parent())
);
});
$('.scroll-btn.scroll-to-right').on('click', function() {
$(this).parent().scrollLeft(
scrollbarPosition += getScrollingValue(false, $(this).parent())
);
});
});
これらのボタンを作成し、オンイベントをそれぞれにバインドする必要があります。これらのイベントの中で、あなたが望むものを達成するためにwindow.scrollTo()またはwindow.scrollBy()を使用してください。
jQueryにはbuilt in scrolling functionsがありますが、探しているものと異なる場合があります。
ボタンを代わりに使用する場合は、ボタンを「画像ホルダー」divの両側に追加します。画像の配列内のどの画像が表示されているかに基づいてdivのコンテンツを変更し、CSSを使用してボタンのサイズと位置を変更することができます。
"display_first（）"、 "display_next（）"、および "display_previous（）"のような関数にjavascriptを使用できます。これらの機能は現在表示されている画像を隠し、は画像配列の次/前の画像を表示します。ボタンのonclick属性を使用してこれらの関数を呼び出すことができます。
<button id="buttonR" onclick="display_next()">
スクロールバーを保持してボタン機能を追加する方法はありませんか？私は両方を使用できる方法があることを望みますが、私はこのようにしなければならないかもしれないと思います。 –
おそらく、組み込みのgetterとsetterを使用して、ボタンのonclick属性用の独自の関数を記述することができます。スライダーのAPIをチェックしてください：http://api.jqueryui.com/slider/#option-value。私が提供したURLは、スライダーの現在の値を取得して設定する方法を示すことができます。 – almostcolin
スクロールバーを右または左にスクロールさせるにはどうしたらいいですか？ – FirstLegion
はい、コンテンツを左右にスクロールします。 –