버튼을 눌렀을 때 대상으로 스크롤 할 수 있기를 원합니다. 나는 이런 생각을하고있었습니다.각도 4로 클릭하면 요소로 스크롤
<button (click)="scroll(#target)">Button</button>
내 구성 요소에는 다음과 같은 방법이 있습니다.
scroll(element) {
window.scrollTo(element.yPosition)
}
위 코드는 유효하지 않지만 단지 내가 생각한 것을 보여줍니다. Angular의 이전 경험이 없으면 Angular 4를 배우기 시작했습니다. 나는이 같은 주위를 검색 한 적이 있지만 모든 예제는 당신이처럼 할 수있는 각도 4
에 많이 차이가있는 AngularJS와에 있습니다 구성 요소에 다음
<button (click)="scroll(target)"></button>
<div #target>Your target</div>
과 :
scroll(el) {
el.scrollIntoView();
}
어떤 이유로 정확한 코드를 실행해도 나에게 아무런 영향이 없습니다. 심지어 하드 코딩 된 창.scrollTo (0, 500) do nothing do –
구성 요소의'scroll' 메서드가 실행되고 있는지 확인할 수 있습니까? 'console.log (el)'을 추가하고 브라우저의 개발자 도구를 열어 올바른 요소를 얻고 있는지 확인하십시오. 또한 콘솔에서 오류를 확인하십시오. –
el.scrollIntoView (true)를 사용해야했습니다. –
jQuery를 사용하여 요소 (예 : document.getElementById (...))를 찾고 .focus() 호출을 사용하여 요청한 것과 같은 작업을 수행했습니다.
Angular를 사용할 때 jQuery가 정말로 필요합니까? Angular와 같은 느낌이 충분해야 함 –
Angular에서 해결책을 찾기에는 너무 열심히 검색하지 않았고 액세스 권한이있는 것으로갔습니다. 그러나 Angular2에 대해 검증되고 리팩토링되지 않은 환경에있었습니다. 에. –
Jquery 및 Angular – Stefdelec
이 파티에 약간 늦었지만 Angular 4+ 용 플러그인을 작성했습니다. 서버 사이드 렌더링과 같은 다른 문제도 다루고 있습니다. 원하는대로 스크롤하여 애니메이션으로 만들 수도 있습니다. 전체 공개, 나는 저자 야.
NPM: @nicky-lenaers/ngx-scroll-to
GitHub: @nicky-lenaers/ngx-scroll-to
희망이 당신을 도와줍니다!
안녕을 사용하면 안됩니다. 아주 멋지다! 나는 소스, 애니메이션, 서비스, 지시문 등으로 스무스 스크롤링을 달성하기위한 많은 코드를 보았습니다. 'smooth'옵션 polyfill과 함께 Element.scrollIntoView()를 사용할 수 없습니까? 그것보다 더 많은 것이 있습니까, 아마도 나는 어떤 복잡성을 얻지 못하고 있습니까? – Ryan
"smooth"옵션은 매우 불안정한 지원을합니다 (https://caniuse.com/#feat=scrollintoview 참조). 이것이 제가 좀 더 우아한 결정을 내린 이유입니다. 코드가 많이 보일 수도 있다는 것에 동의하지만, 대부분의 브라우저를 지원합니다. – Nicky
아, 불행하게도 나는 당신이 묘사하는 접근 방식에 익숙하지 않지만 흥미로운 것으로 들린다. 'ngx-scroll-to' 패키지에 대한 개선점이나 추가 사항을 언제든지 제안 해주십시오. 여러분의 지식과 의견은 언제나 환영합니다. 주제에 대해 더 이야기하고 싶다면 GitHub 저장소에 문제를 제기하는 것이 좋습니다. 지금까지 입력 해 주셔서 감사합니다! – Nicky
실제로는 setTimeout 또는 requestAnimationFrame 또는 jQuery를 사용하지 않고이를 수행하는 순수한 자바 스크립트 방법이 있습니다.
요약하면 scrollView에서 스크롤 할 요소를 찾고 scrollIntoView을 사용하십시오. 여기
el.scrollIntoView({behavior:"smooth"});
는 plunkr이다.
다른 답변의 해결책이 아닌가요? –
이 대답이 다른 두 가지 방법이 있습니다. 1. 점프가 아니라 움직이는 부드러운 스크롤입니다. 2.이 대답은 창을 스크롤하지 않지만 창 내에서 스크롤보기를 이동합니다. 예를 들어, 창 안에 가로 스크롤보기가있는 경우. 예를 들어 plunkr을 확인하십시오. – Jon
구문에 문제가 없지만 #target을 정의해야합니다. – wannadream
이렇게하면 효과가 있습니까? 임의의 숫자를 사용하고 내 함수에서 window.scrollTo (500)을 호출하면 아무 일도 일어나지 않습니다. 요소가 HTMLElement 일 것이라고 생각했습니다 –
#target이란 무엇입니까? Angular가 해결하지 못합니다. 먼저 매개 변수없이 scroll()을 테스트 할 수 있습니다. – wannadream