244

スクロールdivして、クリックしたときにイベントが必要な場合、これを強制的divにスクロールして、内部の要素を表示します。私はそのJavasSriptを次のように書きました：

document.getElementById(chr).scrollIntoView(true);

しかし、これはそれ自体をスクロールしながらすべてのページをスクロールしdivます。それを修正する方法は？

私は次のように言いたい。 MyContainerDiv.getElementById(chr).scrollIntoView(true);

4

16 に答える 16

429

親 (スクロール div コンテナー) を基準にして、スクロールして表示したい要素の上部オフセットを取得する必要があります。

var myElement = document.getElementById('element_within_div');
var topPos = myElement.offsetTop;

変数 topPos は、スクロールする div の上部と表示したい要素の間の距離 (ピクセル単位) に設定されます。

次に、次を使用してその位置までスクロールするように div に指示しますscrollTop。

document.getElementById('scrolling_div').scrollTop = topPos;

プロトタイプ JS フレームワークを使用している場合は、次のように同じことを行います。

var posArray = $('element_within_div').positionedOffset();
$('scrolling_div').scrollTop = posArray[1];

繰り返しますが、これはdivをスクロールして、表示したい要素が正確に一番上になるようにします（または、それが不可能な場合は、表示されるようにできるだけ下にスクロールします）。

于 2009-10-20T05:19:09.783 に答える
73

スクロールしたい DIV 内の要素の位置を見つけ、scrollTop プロパティを設定する必要があります。

divElem.scrollTop = 0;

更新：

上下に移動するサンプルコード

  function move_up() {
    document.getElementById('divElem').scrollTop += 10;
  }

  function move_down() {
    document.getElementById('divElem').scrollTop -= 10;
  }
于 2009-03-11T18:18:52.940 に答える
0

ユーザーアニメーションスクロール

JQueryを使用せず<div>にプログラムで水平方向にスクロールする方法の例を次に示します。垂直方向にスクロールするには、JavaScript の write を , に置き換えます。 scrollLeftscrollTop

JSFiddle

https://jsfiddle.net/fNPvf/38536/

HTML

<!-- Left Button. -->
<div style="float:left;">
    <!-- (1) Whilst it's pressed, increment the scroll. When we release, clear the timer to stop recursive scroll calls. -->
    <input type="button" value="«" style="height: 100px;" onmousedown="scroll('scroller',3, 10);" onmouseup="clearTimeout(TIMER_SCROLL);"/>
</div>
<!-- Contents to scroll. -->
<div id="scroller" style="float: left; width: 100px; height: 100px; overflow: hidden;">
    <!-- <3 -->
    <img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png?v=9c558ec15d8a" alt="image large" style="height: 100px" />
</div>
<!-- Right Button. -->
<div style="float:left;">
    <!-- As (1). (Use a negative value of 'd' to decrease the scroll.) -->
    <input type="button" value="»" style="height: 100px;" onmousedown="scroll('scroller',-3, 10);" onmouseup="clearTimeout(TIMER_SCROLL);"/>
</div>

JavaScript

// Declare the Shared Timer.
var TIMER_SCROLL;
/** 
Scroll function. 
@param id  Unique id of element to scroll.
@param d   Amount of pixels to scroll per sleep.
@param del Size of the sleep (ms).*/
function scroll(id, d, del){
    // Scroll the element.
    document.getElementById(id).scrollLeft += d;
    // Perform a delay before recursing this function again.
    TIMER_SCROLL = setTimeout("scroll('"+id+"',"+d+", "+del+");", del);
 }

Duxの功績によるものです。

自動アニメーションスクロール

さらに、<div>左右にいっぱいにスクロールする関数があります。ここで変更する唯一のことは、スクロールの再帰呼び出しを行う前に、スクロールが完全に拡張されたかどうかを確認することです。

JSFiddle

https://jsfiddle.net/0nLc2fhh/1/

HTML

<!-- Left Button. -->
<div style="float:left;">
    <!-- (1) Whilst it's pressed, increment the scroll. When we release, clear the timer to stop recursive scroll calls. -->
    <input type="button" value="«" style="height: 100px;" onclick="scrollFullyLeft('scroller',3, 10);"/>
</div>
<!-- Contents to scroll. -->
<div id="scroller" style="float: left; width: 100px; height: 100px; overflow: hidden;">
  <!-- <3 -->
  <img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png?v=9c558ec15d8a" alt="image large" style="height: 100px" />
</div>
<!-- Right Button. -->
<div style="float:left;">
    <!-- As (1). (Use a negative value of 'd' to decrease the scroll.) -->
    <input type="button" value="»" style="height: 100px;" onclick="scrollFullyRight('scroller',3, 10);"/>
</div>

JavaScript

// Declare the Shared Timer.
var TIMER_SCROLL;
/** 
Scroll fully left function; completely scrolls  a <div> to the left, as far as it will go.
@param id  Unique id of element to scroll.
@param d   Amount of pixels to scroll per sleep.
@param del Size of the sleep (ms).*/
function scrollFullyLeft(id, d, del){
    // Fetch the element.
    var el = document.getElementById(id);
    // Scroll the element.
    el.scrollLeft += d;
    // Have we not finished scrolling yet?
    if(el.scrollLeft < (el.scrollWidth - el.clientWidth)) {
        TIMER_SCROLL = setTimeout("scrollFullyLeft('"+id+"',"+d+", "+del+");", del);
    }
}

/** 
Scroll fully right function; completely scrolls  a <div> to the right, as far as it will go.
@param id  Unique id of element to scroll.
@param d   Amount of pixels to scroll per sleep.
@param del Size of the sleep (ms).*/
function scrollFullyRight(id, d, del){
    // Fetch the element.
    var el = document.getElementById(id);
    // Scroll the element.
    el.scrollLeft -= d;
    // Have we not finished scrolling yet?
    if(el.scrollLeft > 0) {
        TIMER_SCROLL = setTimeout("scrollFullyRight('"+id+"',"+d+", "+del+");", del);
    }
}
于 2017-04-06T15:53:33.307 に答える