폴리머 요소의 div 로의 부드러운 스크롤

Question

Polymer 1.0 도구를 사용하여 웹 응용 프로그램을 작성하고 있는데 특정 div에 부드러운 스크롤을 시작하는 데 문제가 있습니다. 나는이 폴리머 메서드를 사용하여 성공했다. $. div.scrollIntoView()하지만이 그냥 스크롤하지 않고 특정 div 이동합니다. jQuery 메서드 인 scrollTop()을 사용하고 싶지만이 함수를 실행할 위치와 언제이 함수를 종이 팹에 첨부 할 수 있는지를 파악하지 못하는 것 같습니다.

<div align="center"> 
    <paper-fab icon="arrow-downward" id="fab" on-click="scrollToView"></paper-fab> 
</div> 

을 그리고 여기 내 스크립트이 특정 폴리머 요소의 맨 아래에 있습니다 : : 여기에 지금까지 무엇을 가지고 그래서

<script> 
    Polymer({ 
     is: 'my-view', 
     scrollToView: function() { 
      this.$.parallax.scrollIntoView(false); 
     } 
    }); 
</script> 
<script type="text/javascript"> 
    function goToByScroll() { 
     $('html, body').animate({ 
      scrollTop: $("#section_one_cont").offset().top}, 'slow'); 
    } 
    $("#fab").click(function(e) { 
      goToByScroll(); 
    }) 
</script> 

최초의 '폴리머'스크립트 사실 일 수 있지만에서에서와 매력적인 방법으로, jQuery 스크립트 만 사용하려고하면 아무 것도하지 않습니다. 난 정말 그 몇 가지를 열 것 같은 폴리머 요소 내에서 비 ​​폴리머 스크립트를 사용하는 방법을 알아낼 싶습니다

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 

모든 모든 도움에 감사드립니다 :

이

은 jQuery를 CDN 내가 사용하고 있습니다 이걸 가지고 더 많은 것들을 달성하고 싶습니다. 미리 감사드립니다!

Answer 1

나는 내 자신의 프로젝트 (JQuery를 필요로하지 않는 것이 좋다)를위한 해결책을 찾기 위해 몇 시간 동안 노력했다. 불행히도 모든 옵션은 왜곡되어 있습니다.

scrollIntoView와 scrollIntoView()

가 즉시 또는 자동, 부드럽게 설정할 수있는 동작을 정의 할 수 있습니다
. scrollIntoView에 정의 된 scrollIntoViewOptions는 Firefox에서만 지원된다는 점이 다릅니다. 사람의

scroll-behavior

내가

element.scrollIntoView({block: "end", behavior: "smooth"}); 

이 솔루션을 선호하는 것이다. 그것은 단순한 CSS 스 니펫 일뿐입니다. 그러나 위 예제와 비슷하게 모든 브라우저가 브라우저를 지원하는 것은 아니며 Chrome과 Opera는 실험 웹 플랫폼 기능을 사용할 때만 수행합니다. 정말 사용자에게 도움이되지 않습니다.

scroll-behavior: smooth;