web-dev-qa-db-ja.com

divの上下に水平スクロールバーを取得するにはどうすればよいですか？

これを行うネイティブのHTMLまたはCSSの方法がないことを確信しているので、JavaScriptを使用してこれを行うことにオープンです。明らかに、CSSでoverflow: autoを使用して、divの下部にスクロールバーを取得できます。スクロールバーを下から「複製」してdivの上部に配置できるJavaScriptはありますか？多分別の方法がありますか？

javascripthtmlcssscrollbar
31
Byron Sommardahl

同じ量のコンテンツ幅で実際の要素の上に新しいダミー要素を作成し、追加のスクロールバーを取得してから、スクロールバーをonscrollイベントと結び付けることができます。

function DoubleScroll(element) {
    var scrollbar = document.createElement('div');
    scrollbar.appendChild(document.createElement('div'));
    scrollbar.style.overflow = 'auto';
    scrollbar.style.overflowY = 'hidden';
    scrollbar.firstChild.style.width = element.scrollWidth+'px';
    scrollbar.firstChild.style.paddingTop = '1px';
    scrollbar.firstChild.appendChild(document.createTextNode('\xA0'));
    scrollbar.onscroll = function() {
        element.scrollLeft = scrollbar.scrollLeft;
    };
    element.onscroll = function() {
        scrollbar.scrollLeft = element.scrollLeft;
    };
    element.parentNode.insertBefore(scrollbar, element);
}

DoubleScroll(document.getElementById('doublescroll'));
#doublescroll
{
  overflow: auto; overflow-y: hidden; 
}
#doublescroll p
{
  margin: 0; 
  padding: 1em; 
  white-space: nowrap; 
}
<div id="doublescroll">
    <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
        eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
        enim ad minim veniam, quis nostrud exercitation ullamco laboris
        nisi ut aliquip ex ea commodo consequat.
    </p>
</div>

これは、改善できる可能性のある概念実証です。 scrollWidthのelementを変更する可能性のあるイベントをポーリングまたはリスニングすることにより、たとえば%長さが使用されているか、フォントサイズが変更されているか、他のスクリプトによってコンテンツが変更されています。 （通常のように）IE要素内の水平スクロールバーのレンダリングの選択、およびIE7のページズームに関する問題もありますが、これは始まりです。

37
bobince

JQueryのUI Sliderコントロール を使用できます。 NetTutsでこの効果を達成するためのチュートリアルをオンラインで読むことができます： http://net.tutsplus.com/tutorials/javascript-ajax/making-a-content-slider-with-jquery- ui /

2
Sampson