A, Scroll Snap is an essential front-end skills
CSS Scroll Snap is a very useful feature that allows scrolling stops when the container web page, without the involvement of any JS code, the browser can automatically locate to the specified position smooth specified element. Similar slide advertising effectiveness can pure CSS to achieve.
And CSS Scroll Snap compatibility is very good, mobile end almost safe to use.
Second, the actual project from the scroll-snap Scene
This afternoon in the realization of a functional requirement, just encountered a scene very suitable for use Scroll Snap to implement, in turn slide show characters. So boldly use the next, wow, what a great, do not need any js edge determination, sliding stop automatically navigate to the desired location.
The key CSS code is as follows:
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 the parent container element set scroll-snap-type:x mandatory, horizontal scrolling, forced positioning, set up a sub-list of elements scroll-snap-align:centerto make the list in the middle of rolling containers on the display, so the effect is reached.
However, after the end of the scroll positioning, but also need to highlight the current position of the character material. I found some easy ones!
This sliding effect previously achieved by JS, JS animation either end, or the end of CSS animation, there are callbacks can use. But here it is rolling, rolling and after a while also repositioning themselves, their own positioning time have long or short, who knows when to stop? Sometimes breath slip more elements, not sure in the end stop on which elements.
In fact, standard setters and browser vendors are actively promoting landing Scroll Snap-related callback event, so you can know exactly when to stop and rolled to scroll on which element, however, is still the standard toss, browser is not stand by. Now the project will use, how to do it?
Correct! JS aid will certainly be out.
In fact, if not Scroll Snap usage scenario, even ordinary rolling, the rolling inertia, scroll to detect whether a stop demand is also often encountered. Therefore, it is necessary to scroll stroked a method of detecting when to stop.
Small partners interested in the web front end this technology can be added to our study circle, the sixth year of work, learning to share some with you to develop practical details that need attention. 767-273-102 autumn dress. From the zero-based front-end to learn how to start. Are a group of people with a dream, we may be in different cities, but we will walk together with the front tip of the tip
Third, I scroll suspend detection method
Whether roll detection element stop, my idea is to achieve this, run a timer in the event of rolling, rolling from the record whether the current time and the last rolling distance equal to, if it is considered equal scrolling has stopped, if not equal is considered scrolling is still going on.
JavaScript is a schematic ( this realization obsolete ):
// 定时器，用来检测水平滚动是否结束
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 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频）If you are interested, you can further encapsulate the code above.
Update on the following day
Scroll termination detect whether the distance is equal to scroll back and forth, because both the inertia or Snap positioning scroll event is triggered sustained no need to judge. Therefore, it can directly like this:
// 定时器，用来检测水平滚动是否结束
var timer = null;
// 滚动事件开始
container.addEventListener('scroll', function () {
clearTimeout(timer);
// 重新新的定时器
timer = setTimeout(function () {
// 无滚动事件触发，认为停止滚动了
// ... 做你想做的事情，如回调处理
}, 100);
});
Of course, the method provided above is not very accurate detection suspended because Scroll Snap final relocation browser itself there is a test, this test event, according to my repeated research and testing, should be 350ms (actual operation may be slightly large a few milliseconds), than the above set 100mslarger, and therefore, there will be a redundant judgment error occurs before the positioning start Snap.
I thought, this question can not be avoided, but not a big problem. The total can not set the 400msdetection delay is too high, the experience is not necessarily good.
Fourth, the current scroll target element detection method
It works as follows, through all the elements of a list, a list of detected elements with respect to the left edge of the left edge of the roll container (if it is left-aligned - scroll-snap-align:left) or center (centered) or right edge (right-justified) position. Of course, if element size and consistency list scrolls the container size, left, right edge can be detected.
JS schematic:
[].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 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频）Strictly speaking, should be calculated is equal 0, not less than 10, here all the time, it added a point of fault tolerance interval.
JS need to get two points above the auxiliary demand, the final results came out.