プレーンJavaScript - ScrollIntoView内div

Question

div内の特定の要素（は直接の子ではありません）をスクロールする必要があります。

---

基本的に私は（これだけ親がスクロールする必要があります）ScrollIntoViewが提供するのと同じ機能を必要としますが、指定された親のため。
さらに、サードパーティライブラリを使用することはできません。

---

JavaScriptの開発が非常に限られているため、この問題にどう対処するかについてはわかりません。私を助けてくれる人がいますか？

---

私は私が必要とする正確に何だろうthis codeを見つけましたが、残念ながらそれはjQueryと私はプレーンJavaScriptにそれを翻訳することができませんでしたが必要です。

function costumScroll(id) { 
    window.location.href = "#mydiv"+id; 
} 

基本的window.location.hrefはあなたを助ける必要があります。

Answer 1

私はあなたのためにスタートがあると思います。この問題について考えるときは、子のdivを親の可視領域に入れることを考えます。 1つの単純な方法は、ページ上の親の位置に対する子の位置をページ上で使用することです。次に、親のスクロールを考慮に入れる。可能な実装を挙げる。

function scrollParentToChild(parent, child) { 

    // Where is the parent on page 
    var parentRect = parent.getBoundingClientRect(); 
    // What can you see? 
    var parentViewableArea = { 
    height: parent.clientHeight, 
    width: parent.clientWidth 
    }; 

    // Where is the child 
    var childRect = child.getBoundingClientRect(); 
    // Is the child viewable? 
    var isViewable = (childRect.top >= parentRect.top) && (childRect.top <= parentRect.top + parentViewableArea.height); 

    // if you can't see the child try to scroll parent 
    if (!isViewable) { 
    // scroll by offset relative to parent 
    parent.scrollTop = (childRect.top + parent.scrollTop) - parentRect.top 
    } 


} 

ただ、それをこのような親と子ノードを渡す：

scrollParentToChild(parentElement, childElement) 

はところでメイン要素でこの機能を使用してデモを追加しましたとも、ネストされた要素

https://jsfiddle.net/nex1oa9a/1/

Answer 2

はあなたのようないくつかの簡単なものを行うことができます。

Answer 3

この機能は、いくつかのステップで実現できます。 まず、あなたは、次の値

bottom : val 
height: val 
left: val 
right: val 
top: val 
width: val 

は、それからちょうどabsoluteとしてposition子要素を維持する親要素の中に左上の値に応じて子要素を配置返しますchildElement.getBoundingClientRect(); を使用して、子の位置を取得します。親エレメントのpositionは、子を適切に配置してScrollIntoViewの効果を得るには、relativeタイプでなければなりません。

childElement.style.position = 'absolute'; 
childElement.style.top = 'value in px'; 
childElement.style.left = 'value in px';