A는 스크롤 스냅 필수적인 프런트 엔드 기술이다
CSS 스크롤 스냅는 JS 코드의 참여없이 컨테이너 웹 페이지, 브라우저가 자동으로 부드러운 요소 지정된 지정된 위치에 찾을 수있을 때 정지 스크롤 허용하는 매우 유용한 기능입니다. 유사 슬라이드 광고 효과는 순수 CSS는 달성 할 수 있습니다.
그리고 CSS 스크롤 스냅 호환성이 아주 좋은, 모바일 끝은 사용하는 거의 안전합니다.
스크롤 스냅 장면에서 두 번째로, 실제 프로젝트
기능 요구 사항의 실현에 오늘 오후에, 단지 회전 슬라이드 쇼 문자 사용 스크롤 스냅 구현하기에 매우 적합 장면을 발견했습니다. 그래서 과감하게 자동으로 원하는 위치로 이동 정지를 슬라이딩, 다음, 와우, 무슨 좋은, 필요없는 JS 에지 결정을 사용합니다.
다음과 같이 키 CSS 코드는 다음과 같습니다
ul {
width: 375px; height: 667px;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
white-space: nowrap;
overflow-y: hidden;
}
li {
display: inline-block;
width: 100%; height: 100%;
scroll-snap-align: center;
}
web前端开发学习Q-q-u-n： 767273102 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频）부모 컨테이너 요소 세트 스크롤 scroll-snap-type:x mandatory요소의 서브 세트리스트를 수평 이동 강제 위치, scroll-snap-align:center효과에 도달하도록, 디스플레이 회전 용기의 중간리스트를 확인한다.
그러나, 스크롤 위치 결정의 종료 후, 또한 문자 재료의 현재 위치를 강조 할 필요가있다. 좀 쉽게 사람을 발견!
이전 JS, JS 애니메이션 양단 또는 CSS 애니메이션의 종료에 의해 달성 슬라이딩 효과는 콜백을 사용할 수있다. 그러나 여기 중지 할 때 누가 알고, 자신의 위치 결정 시간이 길거나 짧은이, 잠시는 자신을 재배치 압연 후, 압연입니까? 때때로 호흡의 요소 최종 정지에 확실하지 않은 더 많은 요소를 미끄러.
사실, 표준 세터와 브라우저 벤더가 적극적으로 스크롤 스냅 관련 콜백 이벤트를 착륙 추진하고 있습니다, 그래서 당신은 때 중지하는 방법을 정확하게 알고있는 요소에, 그러나, 여전히 표준 토스입니다 스크롤 압연 수있는 브라우저가 아닙니다 지원. 이제 프로젝트는 어떻게 할, 사용할 것인가?
에! JS 원조는 확실히 나올 것입니다.
스냅 사용 시나리오, 심지어 일반 압연, 압연 관성 스크롤하지 않을 경우 사실, 정지 수요가 종종 발생 여부를 감지하는 스크롤합니다. 따라서, 정지시의 검출 방법을 쓰다 스크롤 할 필요가있다.
이 기술을 엔드 웹 프런트에 관심이 작은 파트너는주의가 필요한 실제적인 세부 사항을 개발하기 위해 당신과 함께 몇 가지를 공유하는 학습, 연구 원, 직장의 여섯 번째 년에 추가 할 수 있습니다. 767-273-102 가을 드레스. 제로 기반 프론트 엔드에서 시작하는 방법을 배울 수 있습니다. 사람들의 그룹은 꿈으로, 우리는 다른 도시에있을 수 있습니다,하지만 우리는 함께 걸어 나갈 것이다 끝의 앞쪽 끝
셋째, 나는 검출 방법을 중단 스크롤
동일하지 않을 경우 현재 시간과 동일 마지막 롤링 거리, 그것은 간주되는 경우 동일한 스크롤이 중지 여부를 롤 검출 소자 정지 여부, 내 생각은 기록에서 압연,이를 압연의 경우 타이머를 실행하는 것입니다 고려 스크롤이 여전히 것입니다.
자바 스크립트는 개략적 인 (인 이 실현되지 않는 ) :
// 定时器，用来检测水平滚动是否结束
var timer = null;
// 上一次滚动的距离
var scrollLeft = 0, scrollTop = 0;
// 滚动事件开始
container.addEventListener('scroll', function () {
clearInterval(timer);
// 重新新的定时器
timer = setInterval(function () {
if (container.scrollLeft == scrollLeft && container.scrollTop == scrollTop) {
// 滚动距离相等，认为停止滚动了
clearInterval(timer);
// ... 做你想做的事情，如回调处理
} else {
// 否则，依然记住上一次滚动位置
scrollLeft = container.scrollLeft;
scrollTop = container.scrollTop;
}
}, 100);
});
web前端开发学习Q-q-u-n： 767273102 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频）당신이 관심이 있다면, 당신은 더 위의 코드를 캡슐화 할 수 있습니다.
다음 날 업데이트
스크롤 종료는 거리가 관성 또는 스냅 위치 스크롤 이벤트가 모두 판단 할 필요를 유지하지 트리거 때문에, 앞뒤로 스크롤와 같은지 여부를 감지합니다. 따라서 직접이 같은 수 있습니다 :
// 定时器，用来检测水平滚动是否结束
var timer = null;
// 滚动事件开始
container.addEventListener('scroll', function () {
clearTimeout(timer);
// 重新新的定时器
timer = setTimeout(function () {
// 无滚动事件触发，认为停止滚动了
// ... 做你想做的事情，如回调处理
}, 100);
});
스크롤 스냅 최종 재배치 브라우저 자체 테스트이 테스트 이벤트가 있기 때문에 물론, 위의 제공 방법은 일시 중단 된 매우 정확한 검출이 아닌, 내 반복 연구와 테스트에 따르면해야 이 350ms (실제 작업이 약간 클 수 있습니다 위의 설정보다 몇 밀리 초), 100ms더 큰, 따라서, 위치 스냅인을 시작하기 전에 중복 판단 오류가 발생있을 것입니다.
이 질문은 큰 문제를 피할 수 있지만 할 수없는, 생각했다. 설정된 수없는 총 400ms검출 지연은 경험이 반드시 좋지 않아, 너무 높습니다.
넷째, 현재 대상 스크롤 요소 감지 방법
- 그것은리스트하는 롤 콘테이너의 좌측 에지의 좌측 에지에 대한 검출 요소들의리스트 (이 왼쪽으로 정렬되어있는 경우의 모든 요소를 통해 다음과 같이 동작 scroll-snap-align:left또는 중심 (중심) 또는 우단 (오른쪽 정렬) 위치). 소자 크기 및 일관성리스트 용기 크기, 왼쪽으로 스크롤하는 경우 물론, 오른쪽 에지가 검출 될 수있다.
JS 개략적 :
[].slice.call(container.children).forEach(function (ele, index) {
if (Math.abs(ele.getBoundingClientRect().left - container.getBoundingClientRect().left) < 10) {
// 此刻的ele元素就是当前定位的元素
// ... 你可以对ele做你想做的事情
} else {
// 此刻的ele元素不是当前定位的元素
}
});
web前端开发学习Q-q-u-n： 767273102 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频）엄밀히 계산되어야 말함 동일한 0이하인, 10여기서, 모든 시간, 장애 허용 구간의 시점을 추가했다.
JS는 보조 수요가 위의 두 점을 얻을 필요가, 최종 결과가 나왔다.