找回密码
当前位置：前端开发者 > JavaScript > 正文

前端开发移动端页面滚动

2018-12-16 分类：JavaScript 阅读(683) 评论(0)
前端开发目录规范
web前端开发规范手册
web前端开发规范 ppt

请各位切换到Chrome浏览器的手机模拟器下预览效果。。
html 代码

<!DOCTYPE html>
<html lang=”en”>
    <head>
        <meta charset=”UTF-8″ />
        <title>fullpage</title>
        <style type=”text/css”>
            @charset “utf-8”;
            * {
                margin: 0;
                padding: 0;
            }
            .containerWrap {
                position: absolute;
                top: 0;
                left: 0;
                bottom: 0;
                right: 0;
                overflow: hidden;
            }
            .container {
                width: 100%;
                -webkit-transition: all 0.6s ease-in-out;
                transition: all 0.6s ease-in-out;
            }
            .slideItem {
                width: 100%;
            }
            .slideItem1 {
                background: #f00;
            }
            .slideItem2 {
                background: #0f0;
            }
            .slideItem3 {
                background: #00f;
            }
        </style>
    </head>
    <body>
        <div class=”containerWrap”>
            <div class=”container”>
                <div class=”slideItem slideItem1″></div>
                <div class=”slideItem slideItem2″></div>
                <div class=”slideItem slideItem3″></div>
            </div>
        </div>
        <script type=”text/javascript”>
            var containerWrap = document.querySelector(‘.containerWrap’)
            var container = containerWrap.querySelector(‘.container’)
            var slideItem = container.querySelectorAll(‘.slideItem’)
            var slideLength = slideItem.length
            var wrapHeight = containerWrap.offsetHeight
            container.setAttribute(
                ‘style’,
                ‘height:’ + wrapHeight * slideLength + ‘px’,
            )
            for (var i = 0; i < slideLength; i++) {
                slideItem[i].setAttribute(
                    ‘style’,
                    ‘height:’ + wrapHeight + ‘px’,
                )
            }
            var FullPage = {
                pageIndex: 1,
                isScrolling: false,
                nextPage: function() {
                    if (this.pageIndex + 1 > slideLength) {
                        return false
                    } else {
                        this.pageIndex += 1
                        this.scrollPage(this.pageIndex)
                    }
                },
                prevPage: function() {
                    if (this.pageIndex – 1 <= 0) {
                        return false
                    } else {
                        this.pageIndex -= 1
                        this.scrollPage(this.pageIndex)
                    }
                },
                scrollPage: function(index) {
                    // isScrolling 动画进行时锁定
                    FullPage.isScrolling = true
                    var rollingDistance = -(index – 1) * wrapHeight + ‘px’
                    container.setAttribute(
                        ‘style’,
                        ‘transform: translateY(‘ + rollingDistance + ‘)’,
                    )
                    container.addEventListener(
                        ‘transitionend’,
                        function() {
                            // 动画结束后释放锁定
                            FullPage.isScrolling = false
                        },
                        false,
                    )
                },
                touchEvent: function(ele) {
                    ele.addEventListener(‘touchstart’, function(e) {
                        var touch = e.touches[0]
                        FullPage.touchStartY = touch.pageY
                    })
                    ele.addEventListener(‘touchend’, function(e) {
                        if (FullPage.isScrolling) return
                        var touch = e.changedTouches[0]
                        FullPage.touchEndY = touch.pageY
                        var diffY = FullPage.touchEndY – FullPage.touchStartY
                        if (Math.abs(diffY) > 50) {
                            if (diffY > 0) {
                                FullPage.prevPage()
                            } else if (diffY < 0) {
                                FullPage.nextPage()
                            }
                        }
                    })
                },
                init: function() {
                    this.touchEvent(container)
                },
            }
            document.addEventListener(‘DOMContentLoaded’, function() {
                FullPage.init()
            })
        </script>
    </body>
</html>
web前端开发规范 2018
alloyteam 前端开发规范
web前端开发规范标准
赞(0)
前端开发者 » 前端开发移动端页面滚动
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论