가로 스크롤 시스템에 슬라이드 애니메이션 추가

마커스 데렘

간단한 수평 스크롤 시스템을 코딩했습니다. JSFIDDLE에서 내 작업의 예를 찾을 수 있습니다. http://jsfiddle.net/marcus_derem/qn603h8b/133/

무엇을 성취하고 싶습니까?
다음과 같이 컨테이너 자식으로 스크롤합니다.

document.getElementById(target_subpage_id).scrollIntoView(false);  

브라우저 SAFARI가이를 지원하지 않기 때문에 애니메이션을 켜는 옵션과 함께 사용할 수 없습니다. 여길 봐

내 질문 :
JSFIDDLE의 시스템에 슬라이드 애니메이션을 추가하는 방법은 무엇입니까? 아니면 역학을 다시 작성해야합니까?

~ 미리 Markus에게 감사드립니다.

악셀 쾰러

이를 위해 CSS를 사용할 수 있습니다.

html {
  scroll-behavior: smooth;
}

그러나 다시 말하지만 브라우저 지원도 그다지 좋지 않습니다 .

그래도 다른 방법이 있습니다. 훌륭한 개요를 보려면 이 페이지를 읽으십시오 : https://css-tricks.com/snippets/jquery/smooth-scrolling/

// Scroll to specific values
// scrollTo is the same
window.scroll({
  top: 2500, 
  left: 0, 
  behavior: 'smooth'
});

// Scroll certain amounts from current position 
window.scrollBy({ 
  top: 100, // could be negative value
  left: 0, 
  behavior: 'smooth' 
});

// Scroll to a certain element
document.querySelector('.hello').scrollIntoView({ 
  behavior: 'smooth' 
});

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

어떻게 윈도우 스크롤의 활성 사업부에 애니메이션을 추가?

분류에서Dev

무한 스크롤로드 후 스 와이퍼 슬라이더가 작동하지 않음 추가 정보

분류에서Dev

사용자가 스크롤하여 볼 때 애니메이션하는 방법

분류에서Dev

섹션에 슬라이드 추가

분류에서Dev

가로로 스크롤되는 div 내 애니메이션의 카드 간격 문제

분류에서Dev

이미지에 슬라이드 업 애니메이션을 추가하는 방법은 무엇입니까?

분류에서Dev

이미지의 무한한 가로 스크롤 애니메이션

분류에서Dev

html # 태그가있는 스크롤 애니메이션

분류에서Dev

슬라이드에 링크 추가

분류에서Dev

내비게이션 바에 세로 슬라이드 애니메이션 추가-CSS 전용

분류에서Dev

가이드 라인 퍼센트 변경시 슬라이드 애니메이션

분류에서Dev

슬라이드 쇼 단추가 이미지를 스크롤하도록하려면 어떻게합니까?

분류에서Dev

세션 및 슬라이스 메시지로 가득 찬 시스템 로그

분류에서Dev

가로 / 세로 스크롤 애니메이션을 인 / 아웃하려면 어떻게해야합니까?

분류에서Dev

이 Jquery 스크롤 애니메이션에 Easing 속성을 추가하는 방법

분류에서Dev

동영상이 끝난 후 Powerpoint 슬라이드에 애니메이션을 추가 하시겠습니까?

분류에서Dev

스크롤에서 애니메이션 높이가 제대로 작동하지 않음

분류에서Dev

스크롤시 Highchart 애니메이션로드

분류에서Dev

액션 스크립트 3 : gotoAndStop 애니메이션 추가

분류에서Dev

Raphaël : Spinner 그래픽에 반 애니메이션 텍스트 추가 시도

분류에서Dev

테이블에 스크롤바 추가

분류에서Dev

스크롤 위치 기반 자바 스크립트 애니메이션이 위로 스크롤 할 때 원래 상태로 돌아 가지 않습니다.

분류에서Dev

Animate.css 사용 문제-애니메이션 페이지에 가로 스크롤 막대가 추가됨

분류에서Dev

스크롤링 애니메이션 코드가 작동하지 않음

분류에서Dev

크로스 페이드가있는 ffmpeg 슬라이드 쇼

분류에서Dev

슬라이드 아웃 메뉴-텍스트가 스크롤되지 않음

분류에서Dev

컨트롤러에서 div에 애니메이션 클래스 추가

분류에서Dev

ListView가 아래로 스크롤되는 경우에만 Android 애니메이션

분류에서Dev

스크롤 할 때 슬라이더 애니메이션

Related 관련 기사

  1. 1

    어떻게 윈도우 스크롤의 활성 사업부에 애니메이션을 추가?

  2. 2

    무한 스크롤로드 후 스 와이퍼 슬라이더가 작동하지 않음 추가 정보

  3. 3

    사용자가 스크롤하여 볼 때 애니메이션하는 방법

  4. 4

    섹션에 슬라이드 추가

  5. 5

    가로로 스크롤되는 div 내 애니메이션의 카드 간격 문제

  6. 6

    이미지에 슬라이드 업 애니메이션을 추가하는 방법은 무엇입니까?

  7. 7

    이미지의 무한한 가로 스크롤 애니메이션

  8. 8

    html # 태그가있는 스크롤 애니메이션

  9. 9

    슬라이드에 링크 추가

  10. 10

    내비게이션 바에 세로 슬라이드 애니메이션 추가-CSS 전용

  11. 11

    가이드 라인 퍼센트 변경시 슬라이드 애니메이션

  12. 12

    슬라이드 쇼 단추가 이미지를 스크롤하도록하려면 어떻게합니까?

  13. 13

    세션 및 슬라이스 메시지로 가득 찬 시스템 로그

  14. 14

    가로 / 세로 스크롤 애니메이션을 인 / 아웃하려면 어떻게해야합니까?

  15. 15

    이 Jquery 스크롤 애니메이션에 Easing 속성을 추가하는 방법

  16. 16

    동영상이 끝난 후 Powerpoint 슬라이드에 애니메이션을 추가 하시겠습니까?

  17. 17

    스크롤에서 애니메이션 높이가 제대로 작동하지 않음

  18. 18

    스크롤시 Highchart 애니메이션로드

  19. 19

    액션 스크립트 3 : gotoAndStop 애니메이션 추가

  20. 20

    Raphaël : Spinner 그래픽에 반 애니메이션 텍스트 추가 시도

  21. 21

    테이블에 스크롤바 추가

  22. 22

    스크롤 위치 기반 자바 스크립트 애니메이션이 위로 스크롤 할 때 원래 상태로 돌아 가지 않습니다.

  23. 23

    Animate.css 사용 문제-애니메이션 페이지에 가로 스크롤 막대가 추가됨

  24. 24

    스크롤링 애니메이션 코드가 작동하지 않음

  25. 25

    크로스 페이드가있는 ffmpeg 슬라이드 쇼

  26. 26

    슬라이드 아웃 메뉴-텍스트가 스크롤되지 않음

  27. 27

    컨트롤러에서 div에 애니메이션 클래스 추가

  28. 28

    ListView가 아래로 스크롤되는 경우에만 Android 애니메이션

  29. 29

    스크롤 할 때 슬라이더 애니메이션

뜨겁다태그

보관