div가있는 테이블 행을 포함하는 스크롤 막대가 데이터베이스에서 동적으로 생성되는 페이지가 있습니다. 각 표 행은 동영상 플레이어 옆의 YouTube 재생 목록에서 볼 수있는 것과 같은 링크처럼 작동합니다.
사용자가 페이지를 방문하면 해당 옵션이 스크롤 div의 맨 위로 이동해야합니다. 이 기능은 작동 중입니다. 문제는 너무 멀다는 것입니다. 그들이 켜져있는 옵션처럼 약 10px가 너무 높습니다. 따라서 페이지를 방문하고 URL을 사용하여 선택한 옵션을 식별 한 다음 해당 옵션을 스크롤 div의 맨 위로 스크롤합니다. 참고 : 이것은 창의 스크롤 막대가 아니라 스크롤 막대가있는 div입니다.
이 코드를 사용하여 선택한 옵션을 div의 맨 위로 이동합니다.
var pathArray = window.location.pathname.split( '/' );
var el = document.getElementById(pathArray[5]);
el.scrollIntoView(true);
div의 맨 위로 이동하지만 약 10 픽셀이 너무 멀어집니다. 누구든지 그것을 고치는 방법을 알고 있습니까?
답변
약 10px이면 포함하는 div의 스크롤 오프셋을 다음과 같이 수동으로 조정할 수 있다고 생각합니다 .
el.scrollIntoView(true);
document.getElementById("containingDiv").scrollTop -= 10;
답변
적절한 위치로 부드럽게 스크롤
정확한 y 좌표를 얻고 사용window.scrollTo({top: y, behavior: 'smooth'})
const id = 'profilePhoto';
const yOffset = -10;
const element = document.getElementById(id);
const y = element.getBoundingClientRect().top + window.pageYOffset + yOffset;
window.scrollTo({top: y, behavior: 'smooth'});
답변
두 단계로 수행 할 수 있습니다.
el.scrollIntoView(true);
window.scrollBy(0, -10); // Adjust scrolling with a negative value here
답변
절대 방법으로 위치 앵커
이를 수행하는 또 다른 방법은 오프셋 별 스크롤에 의존하지 않고 페이지에서 원하는 위치에 앵커를 정확히 배치하는 것입니다. 각 요소를 더 잘 제어 할 수 있고 (예 : 특정 요소에 대해 다른 오프셋을 원하는 경우) 브라우저 API 변경 / 차이에 더 저항 할 수도 있습니다.
<div id="title-element" style="position: relative;">
<div id="anchor-name" style="position: absolute; top: -100px; left: 0"></div>
</div>
이제 오프셋은 요소에 대해 -100px로 지정됩니다. 코드 재사용을 위해이 앵커를 생성하는 함수를 생성하거나 React와 같은 최신 JS 프레임 워크를 사용하는 경우 앵커를 렌더링하는 구성 요소를 생성하여이를 수행하고 각 요소에 대한 앵커 이름과 정렬을 전달합니다. 동일하지 않습니다.
그런 다음 사용하십시오.
const element = document.getElementById('anchor-name')
element.scrollIntoView({ behavior: 'smooth', block: 'start' });
100px의 오프셋으로 부드러운 스크롤을 위해.
답변
이 문제는 다음을 사용하여 해결했습니다.
element.scrollIntoView({ behavior: 'smooth', block: 'center' });이렇게하면 요소가 center스크롤 후에 나타나 므로을 계산할 필요가 없습니다 yOffset.
도움이 되길 바랍니다 …
답변
이것은 Chrome에서 나를 위해 작동합니다 (부드러운 스크롤링과 타이밍 해킹 없음)
요소를 이동하고 스크롤을 시작한 다음 뒤로 이동합니다.
요소가 이미 화면에있는 경우 눈에 보이는 “팝핑”이 없습니다.
pos = targetEle.style.position;
top = targetEle.style.top;
targetEle.style.position = 'relative';
targetEle.style.top = '-20px';
targetEle.scrollIntoView({behavior: 'smooth', block: 'start'});
targetEle.style.top = top;
targetEle.style.position = pos;답변
이전 답변을 바탕으로 Angular5 프로젝트에서 이것을 수행하고 있습니다.
시작 :
// el.scrollIntoView(true);
el.scrollIntoView({
behavior: 'smooth',
block: 'start'
});
window.scrollBy(0, -10); 그러나 이것은 몇 가지 문제를 일으키고 다음과 같이 scrollBy ()에 대한 setTimeout이 필요했습니다.
//window.scrollBy(0,-10);
setTimeout(() => {
window.scrollBy(0,-10)
}, 500);MSIE11 및 Chrome 68+에서 완벽하게 작동합니다. 나는 FF에서 테스트하지 않았습니다. 500ms는 제가 할 수있는 가장 짧은 지연이었습니다. 부드러운 스크롤이 아직 완료되지 않았기 때문에 때때로 아래로 내려가는 데 실패했습니다. 자신의 프로젝트에 맞게 조정하십시오.
이 간단하지만 효과적인 솔루션 을 위해 Fred727 에게 +1하십시오 .
