div 내부의 요소로 스크롤하는 방법은 무엇입니까? div이 있고 클릭 할

스크롤 div이 있고 클릭 할 때 링크를 원하면 div내부 요소를 볼 수 있도록 스크롤됩니다. JavasSript를 다음과 같이 작성했습니다.

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

그러나 이것은 div자체 를 스크롤하면서 모든 페이지를 스크롤합니다 . 그것을 고치는 방법?

그렇게 말하고 싶어

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

답변

부모 (스크롤링 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를 스크롤하여 보려는 요소가 정확히 맨 위에 오게합니다 (또는 가능하지 않은 경우 볼 수있는 한 아래로 스크롤합니다).

답변

스크롤하려는 DIV에서 요소의 위치를 ​​찾아서 scrollTop 속성을 설정해야합니다.

divElem.scrollTop = 0;

업데이트 :

위 또는 아래로 이동하는 샘플 코드

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

  function move_down() {
    document.getElementById('divElem').scrollTop -= 10;
  }

답변

방법 1-요소 내부의 요소로 부드럽게 스크롤

var box = document.querySelector('.box'),
    targetElm = document.querySelector('.boxChild'); // <-- Scroll to here within ".box"

document.querySelector('button').addEventListener('click', function(){
   scrollToElm( box, targetElm , 600 );   
});


/////////////

function scrollToElm(container, elm, duration){
  var pos = getRelativePos(elm);
  scrollTo( container, pos.top , 2);  // duration in seconds
}

function getRelativePos(elm){
  var pPos = elm.parentNode.getBoundingClientRect(), // parent pos
      cPos = elm.getBoundingClientRect(), // target pos
      pos = {};

  pos.top    = cPos.top    - pPos.top + elm.parentNode.scrollTop,
  pos.right  = cPos.right  - pPos.right,
  pos.bottom = cPos.bottom - pPos.bottom,
  pos.left   = cPos.left   - pPos.left;

  return pos;
}
    
function scrollTo(element, to, duration, onDone) {
    var start = element.scrollTop,
        change = to - start,
        startTime = performance.now(),
        val, now, elapsed, t;

    function animateScroll(){
        now = performance.now();
        elapsed = (now - startTime)/1000;
        t = (elapsed/duration);

        element.scrollTop = start + change * easeInOutQuad(t);

        if( t < 1 )
            window.requestAnimationFrame(animateScroll);
        else
            onDone && onDone();
    };

    animateScroll();
}

function easeInOutQuad(t){ return t<.5 ? 2*t*t : -1+(4-2*t)*t };
.box{ width:80%; border:2px dashed; height:180px; overflow:auto; }
.boxChild{ 
  margin:600px 0 300px; 
  width: 40px;
  height:40px;
  background:green;
}
<button>Scroll to element</button>
<div class='box'>
  <div class='boxChild'></div>
</div>
스 니펫 확장

방법 2- Element.scrollIntoView 사용 :

참고 브라우저 지원 이 하나 크지 않다

var targetElm = document.querySelector('.boxChild'),  // reference to scroll target
    button = document.querySelector('button');        // button that triggers the scroll
  
// bind "click" event to a button 
button.addEventListener('click', function(){
   targetElm.scrollIntoView()
})
.box {
  width: 80%;
  border: 2px dashed;
  height: 180px;
  overflow: auto;
  scroll-behavior: smooth; /* <-- for smooth scroll */
}

.boxChild {
  margin: 600px 0 300px;
  width: 40px;
  height: 40px;
  background: green;
}
<button>Scroll to element</button>
<div class='box'>
  <div class='boxChild'></div>
</div>
스 니펫 확장

방법 3-CSS 스크롤 동작 사용 :

.box {
  width: 80%;
  border: 2px dashed;
  height: 180px;
  overflow-y: scroll;
  scroll-behavior: smooth; /* <--- */
}

#boxChild {
  margin: 600px 0 300px;
  width: 40px;
  height: 40px;
  background: green;
}
<a href='#boxChild'>Scroll to element</a>
<div class='box'>
  <div id='boxChild'></div>
</div>
스 니펫 확장

답변

필요한 경우에만 div보기로 요소를 스크롤하려면이 scrollIfNeeded함수를 사용할 수 있습니다 .

function scrollIfNeeded(element, container) {
  if (element.offsetTop < container.scrollTop) {
    container.scrollTop = element.offsetTop;
  } else {
    const offsetBottom = element.offsetTop + element.offsetHeight;
    const scrollBottom = container.scrollTop + container.offsetHeight;
    if (offsetBottom > scrollBottom) {
      container.scrollTop = offsetBottom - container.offsetHeight;
    }
  }
}

document.getElementById('btn').addEventListener('click', ev => {
  ev.preventDefault();
  scrollIfNeeded(document.getElementById('goose'), document.getElementById('container'));
});
.scrollContainer {
  overflow-y: auto;
  max-height: 100px;
  position: relative;
  border: 1px solid red;
  width: 120px;
}

body {
  padding: 10px;
}

.box {
  margin: 5px;
  background-color: yellow;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#goose {
  background-color: lime;
}
<div id="container" class="scrollContainer">
  <div class="box">duck</div>
  <div class="box">duck</div>
  <div class="box">duck</div>
  <div class="box">duck</div>
  <div class="box">duck</div>
  <div class="box">duck</div>
  <div class="box">duck</div>
  <div class="box">duck</div>
  <div id="goose" class="box">goose</div>
  <div class="box">duck</div>
  <div class="box">duck</div>
  <div class="box">duck</div>
  <div class="box">duck</div>
</div>

<button id="btn">scroll to goose</button>
스 니펫 확장

답변

코드는 다음과 같아야합니다.

var divElem = document.getElementById('scrolling_div');
var chElem = document.getElementById('element_within_div');
var topPos = divElem.offsetTop;
divElem.scrollTop = topPos - chElem.offsetTop;

자식 상단 위치와 div의 상단 위치의 차이를 스크롤하려고합니다.

다음을 사용하여 하위 요소에 액세스하십시오.

var divElem = document.getElementById('scrolling_div'); 
var numChildren = divElem.childNodes.length;

등등….

답변

jQuery를 사용하는 경우 다음을 사용하여 애니메이션으로 스크롤 할 수 있습니다.

$(MyContainerDiv).animate({scrollTop: $(MyContainerDiv).scrollTop() + ($('element_within_div').offset().top - $(MyContainerDiv).offset().top)});

애니메이션은 선택 사항입니다. 위에서 계산 한 scrollTop 값을 가져 와서 컨테이너의 scrollTop 속성에 직접 넣을 수도 있습니다 .

답변

기본 JS, 크로스 브라우저, 부드러운 스크롤 (업데이트 2020)

설정 ScrollTop하면 원하는 결과가 나오지만 스크롤이 매우 갑작 스럽습니다. jquery부드러운 스크롤을 사용 하는 것은 옵션이 아닙니다. 여기에 모든 주요 브라우저를 지원하는 작업을 수행하는 기본 방법이 있습니다. 참조 -Caniuse

// get the "Div" inside which you wish to scroll (i.e. the container element)
const El = document.getElementById('xyz');

// Lets say you wish to scroll by 100px, 
El.scrollTo({top: 100, behavior: 'smooth'});

// If you wish to scroll until the end of the container
El.scrollTo({top: El.scrollHeight, behavior: 'smooth'});

그게 다야!

여기 의심스러운 사람들을위한 스 니펫이 있습니다. 

document.getElementById('btn').addEventListener('click', e => {
  e.preventDefault();
  // smooth scroll
  document.getElementById('container').scrollTo({top: 175, behavior: 'smooth'});
});
/* just some styling for you to ignore */
.scrollContainer {
  overflow-y: auto;
  max-height: 100px;
  position: relative;
  border: 1px solid red;
  width: 120px;
}

body {
  padding: 10px;
}

.box {
  margin: 5px;
  background-color: yellow;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#goose {
  background-color: lime;
}
<!-- Dummy html to be ignored -->
<div id="container" class="scrollContainer">
  <div class="box">duck</div>
  <div class="box">duck</div>
  <div class="box">duck</div>
  <div class="box">duck</div>
  <div class="box">duck</div>
  <div class="box">duck</div>
  <div class="box">duck</div>
  <div class="box">duck</div>
  <div id="goose" class="box">goose</div>
  <div class="box">duck</div>
  <div class="box">duck</div>
  <div class="box">duck</div>
  <div class="box">duck</div>
</div>

<button id="btn">goose</button>
스 니펫 확장

업데이트 : 의견에서 알 수 있듯이 Element.scrollTo()IE11에서는 지원되지 않는 것 같습니다 . 따라서 IE11에 관심이 없다면 (실제로해서는 안되는) 모든 프로젝트에서 자유롭게 사용할 수 있습니다. Edge에 대한 지원이 있습니다. 따라서 Edge / Windows 사용자를 실제로 남기지 않습니다.)

참고