IOS 가 굴 러 갈 때 fixed 가 사라 집 니 다.

얼마 전에 애플 이 새로운 하드웨어 를 발표 한 것 을 제외 하고 새로운 운영 체제 도 발표 했다. IOS 11 은 모두 가 그 이상 한 앞머리 가 어떻게 어 울 리 는 지 에 관심 을 가 졌 을 때 필자 의 프로젝트 는 IOS 11 에 어 울 리 는 데 다른 문제 가 생 겼 다.
아시 다시 피 IOS 가 굴 러 갈 때 js 를 실행 할 수 없습니다. 이것 은 내부 의 실현 으로 인 한 것 이지 만 이 문 제 를 해결 하기 위해 특별히 내 놓 은 position: sticky 속성 으로 동적 설정 fixed 장면 을 호 환 할 수 있 습 니 다. 그러나 필자 의 테스트 기 가 IOS 11 로 올 라 갔 을 때 모든 것 이 달 라 졌 습 니 다.
 ios 11 에서 스크롤 이상 의 페이지 를 열 면 (효과 가 보이 지 않 으 면 이 링크 를 방문 할 수 있 습 니 다) 페이지 의 fixed button 이 너무 빨리 굴 러 가면 사라 집 니 다. 스크롤 이 멈 춘 후에 다시 나타 납 니 다. 매우 이상 한 문제 입 니 다. 필자 와 팀 의 동료 들 의 여러 가지 디 버 깅 을 통 해 주류 해결 방안 은 두 가지 가 있 음 을 알 수 있 습 니 다.
1. 브 라 우 저의 스크롤 이 벤트 를 직접 피하 고 touch 이벤트 로 스크롤 을 모 의 합 니 다. 즉, 이 글 에서 소개 한 것 입 니 다.
2. 다른 하 나 는 재 미 있 습 니 다. 변경 이 비교적 작은 상황 에서 이 IOS 11 의 이 bug 를 복원 할 수 있 습 니 다. 이 링크 를 보 세 요.
사실 원 리 는 매우 간단 하 다. 필 자 는 일부 디 버 깅 을 통 해 굴 러 가 는 요소 가 window 의 스크롤 바 가 아니 라 fixed 의 요소 가 굴 러 가 는 요소 내부 에 있 지 않 고 포 지 셔 닝 요소 와 굴 러 가 는 요소 가 같은 등급 에 있 으 면 IOS 11 의 이 결함 을 비교적 편리 하 게 피 할 수 있다 는 것 을 발견 했다.
      스크롤 할 요소 에 추가

 overflow: auto;
 -webkit-overflow-scrolling: touch;    
 height: 100vh;

핵심 코드 는 상기 3 줄 입 니 다. 목적 은 body 와 같은 스크롤 바 를 수용 하 는 용 기 를 만 드 는 것 입 니 다. 물론 이렇게 설정 한 후에 ios 에서 의 스크롤 체험 이 비교적 좋 지 않 기 때문에 두 번 째 줄 의 hack 를 추가 해 야 합 니 다. 관련 글 은 여 기 를 참고 하면 최소 변경 을 바탕 으로 fixed 요소 가 정상적으로 표 시 될 수 있 도록 보장 합 니 다.
      인터넷 에 또... transform: translate3d(0, 0, 0);근 데 테스트 를 해 봤 는데 소 용이 없어 요.
 
다음으로 전송:https://www.cnblogs.com/xuniannian/p/8722393.html