原生JS开发 移动端全屏滑动

原创 已于 2024-04-30 10:46:01 修改 · 597 阅读 · 5 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#javascript #css #前端
于 2024-04-28 18:13:10 首次发布
该博客围绕前端滑动切换与回弹功能展开。先进行案例分析，明确功能为切换、回弹及边界限制，页面结构为 scroll-wrapper 在 slide-page 中滑动。接着分析 Flex 布局和样式，然后阐述功能实现步骤，包括绑定事件处理函数、获取坐标、处理 touchmove 和 touchend 事件，最后给出代码。

1. 案例分析

1.1. 功能

  1. 切换 回弹

滑动到1/3处就切换 -> 切换

没有到1/3就回到当前图片 -> 回弹

  1. 限制边界

第一页/最后一页就不能滑动了

1.2. 页面

scroll-wrapper > slide-page

scroll-wrapper 可以在 slide-page中随意滑动

2. Flex布局和样式分析

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 1000px -> 100rem
        document.documentElement.style.fontSize = document.documentElement.clientWidth / 37.5 + 'px';
    </script>
    <style>
        body {
            margin: 0
        }

        html,
        body,
        #app {
            height: 100%;
        }

        div {
            width: 100%;
            display: flex;
            flex-direction: column;
        }

        .slide-page {
            position: relative;
            height: 100%;
            overflow: hidden;
        }

        .scroll-wrapper {
            position: absolute;
            width: 150rem;
            height: 100%;
            flex-direction: row;
        }

        .page-item {
            height: 100%;
            flex: 1;
        }

        .page-item .inner {
            height: 100%;
            justify-content: center;
            align-items: center;
            font-size: 5rem;
        }

        .page-item:nth-child(1) .inner {
            background-color: orange;
        }

        .page-item:nth-child(2) .inner {
            background-color: red;
        }

        .page-item:nth-child(3) .inner {
            background-color: pink;
        }

        .page-item:nth-child(4) .inner {
            background-color: blue;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="slide-page">
            <div class="scroll-wrapper">
                <div class="page-item">
                    <div class="inner">1</div>
                </div>
                <div class="page-item">
                    <div class="inner">2</div>
                </div>
                <div class="page-item">
                    <div class="inner">3</div>
                </div>
                <div class="page-item">
                    <div class="inner">4</div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

3. 功能实现

3.1. 绑定事件处理函数

拿元素

绑定事件处理函数

编辑绑定的函数方法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 1000px -> 100rem
        document.documentElement.style.fontSize = document.documentElement.clientWidth / 37.5 + 'px';
    </script>
    <style>
        body {
            margin: 0
        }

        html,
        body,
        #app {
            height: 100%;
        }

        div {
            width: 100%;
            display: flex;
            flex-direction: column;
        }

        .slide-page {
            position: relative;
            height: 100%;
            overflow: hidden;
        }

        .scroll-wrapper {
            position: absolute;
            width: 150rem;
            height: 100%;
            flex-direction: row;
        }

        .page-item {
            height: 100%;
            flex: 1;
        }

        .page-item .inner {
            height: 100%;
            justify-content: center;
            align-items: center;
            font-size: 5rem;
        }

        .page-item:nth-child(1) .inner {
            background-color: orange;
        }

        .page-item:nth-child(2) .inner {
            background-color: red;
        }

        .page-item:nth-child(3) .inner {
            background-color: pink;
        }

        .page-item:nth-child(4) .inner {
            background-color: blue;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="slide-page">
            <div class="scroll-wrapper">
                <div class="page-item">
                    <div class="inner">1</div>
                </div>
                <div class="page-item">
                    <div class="inner">2</div>
                </div>
                <div class="page-item">
                    <div class="inner">3</div>
                </div>
                <div class="page-item">
                    <div class="inner">4</div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 拿宽度
        const oSlidePage = document.querySelector('.slide-page'),
            pageWidth = oSlidePage.offsetWidth;

        // 要滚动
        const oScrollWrapper = oSlidePage.querySelector('.scroll-wrapper');

        // 根据长度来判断边界
        const oPageItems = oScrollWrapper.querySelectorAll('.page-item');

        // 需要哪些变量来控制


        const init = () => {
            bindEvent
        }


        function bindEvent() {
            oScrollWrapper.addEventListener('touchstart', handleTouchStart, false);
            oScrollWrapper.addEventListener('touchmove', handleTouchMove, false);
            oScrollWrapper.addEventListener('touchend', handleTouchend, false);
        }

        function handleTouchStart() {

        }

        function handleTouchMove() {

        }

        function handleTouchend() {

        }


        init();

    </script>
</body>

</html>

3.2. touchstart: 拿到鼠标第一次接触的坐标

<body>
    <div id="app">
        <div class="slide-page">
            <div class="scroll-wrapper">
                <div class="page-item">
                    <div class="inner">1</div>
                </div>
                <div class="page-item">
                    <div class="inner">2</div>
                </div>
                <div class="page-item">
                    <div class="inner">3</div>
                </div>
                <div class="page-item">
                    <div class="inner">4</div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 拿宽度
        const oSlidePage = document.querySelector('.slide-page'),
            pageWidth = oSlidePage.offsetWidth;

        // 要滚动
        const oScrollWrapper = oSlidePage.querySelector('.scroll-wrapper');

        // 根据长度来判断边界
        const oPageItems = oScrollWrapper.querySelectorAll('.page-item');

        // 需要哪些变量来控制

        // startX moveX ->  startX 到 moveX的距离要计算出来 也就是scroppWrapper要移动的距离
        let startX = 0;
          

        const init = () => {
            bindEvent
        }


        function bindEvent() {
            oScrollWrapper.addEventListener('touchstart', handleTouchStart, false);
            oScrollWrapper.addEventListener('touchmove', handleTouchMove, false);
            oScrollWrapper.addEventListener('touchend', handleTouchend, false);
        }

        // 拿到第一个手指坐标
        function handleTouchStart(e) {
            // touches单指触控 手指就是[0]
            startX = e.touches[0].clienX;
        }

        function handleTouchMove() {
          
        }

        function handleTouchend() {

        }


        init();

    </script>
</body>

3.3. touchmove

拿到move后的坐标moveX

根据moveX 和 startX来做边界: 右划且是第一页 || 左划且是最后一页 return

计算出移动的距离: distanceX

做页面移动过渡和动画

<body>
    <div id="app">
        <div class="slide-page">
            <div class="scroll-wrapper">
                <div class="page-item">
                    <div class="inner">1</div>
                </div>
                <div class="page-item">
                    <div class="inner">2</div>
                </div>
                <div class="page-item">
                    <div class="inner">3</div>
                </div>
                <div class="page-item">
                    <div class="inner">4</div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 拿宽度
        const oSlidePage = document.querySelector('.slide-page'),
            pageWidth = oSlidePage.offsetWidth;

        // 要滚动
        const oScrollWrapper = oSlidePage.querySelector('.scroll-wrapper');

        // 根据长度来判断边界
        const oPageItems = oScrollWrapper.querySelectorAll('.page-item');

        // 需要哪些变量来控制

        // startX moveX ->  startX 到 moveX的距离要计算出来 也就是scroppWrapper要移动的距离
        let startX = 0,
            pageIndex = 0, // 第几个page-item的索引
            distancex = 0;// 移动的距离

        const init = () => {
            bindEvent
        }


        function bindEvent() {
            oScrollWrapper.addEventListener('touchstart', handleTouchStart, false);
            oScrollWrapper.addEventListener('touchmove', handleTouchMove, false);
            oScrollWrapper.addEventListener('touchend', handleTouchend, false);
        }

        // 拿到第一个手指坐标
        function handleTouchStart(e) {
            // touches单指触控 手指就是[0]
            startX = e.touches[0].clienX;
        }

        function handleTouchMove() {
            // 手指滑动的当前的坐标
            const moveX = e.touches[0].clienX;

            // 做边界
            // 判断用户是左划还是右划 --> 如果moveX > startX 往右划; 否则左划
            // 右划且是第一页 || 左划且是最后一页 return
            if ((moveX > startX && pageIndex === 0)
                ||
                (moveX < startX && pageIndex === oPageItems.length - 1)) {
                return;
            }

            // 不是第一/最后一页 -> 要划动 算出移动的距离
            distanceX = moveX - startX;

            // 做页面移动的效果和动画 页面滑动的距离: 自己的宽度
            // 第二页: - pageWidth * 1 + distanceX
            setTranslateX(- pageWidth * pageIndex + distanceX)
        }

        // 做页面移动的效果和动画
        function setTranslateX(transX) {
            oScrollWrapper.style.transition = 'all .1s';
            // translateX水平左右移动 正值右移 负值左移
            oScrollWrapper.style.transform = `translateX(${transX}px)`;
        }

        function handleTouchend() {

        }


        init();

    </script>
</body>

3.4. touchend

在move的情况下，计算移动的距离是否大于1/3 切换/回弹

距离大于1/3 -> 判断是左划还是右划 右划 -> 修改pageIndex 当前页面的索引号

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 1000px -> 100rem
        document.documentElement.style.fontSize = document.documentElement.clientWidth / 37.5 + 'px';
    </script>
    <style>
        body {
            margin: 0
        }

        html,
        body,
        #app {
            height: 100%;
        }

        div {
            width: 100%;
            display: flex;
            flex-direction: column;
        }

        .slide-page {
            position: relative;
            height: 100%;
            overflow: hidden;
        }

        .scroll-wrapper {
            position: absolute;
            width: 150rem;
            height: 100%;
            flex-direction: row;
        }

        .page-item {
            height: 100%;
            flex: 1;
        }

        .page-item .inner {
            height: 100%;
            justify-content: center;
            align-items: center;
            font-size: 5rem;
        }

        .page-item:nth-child(1) .inner {
            background-color: orange;
        }

        .page-item:nth-child(2) .inner {
            background-color: red;
        }

        .page-item:nth-child(3) .inner {
            background-color: pink;
        }

        .page-item:nth-child(4) .inner {
            background-color: blue;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="slide-page">
            <div class="scroll-wrapper">
                <div class="page-item">
                    <div class="inner">1</div>
                </div>
                <div class="page-item">
                    <div class="inner">2</div>
                </div>
                <div class="page-item">
                    <div class="inner">3</div>
                </div>
                <div class="page-item">
                    <div class="inner">4</div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 拿宽度
        const oSlidePage = document.querySelector('.slide-page'),
            pageWidth = oSlidePage.offsetWidth;

        // 要滚动
        const oScrollWrapper = oSlidePage.querySelector('.scroll-wrapper');

        // 根据长度来判断边界
        const oPageItems = oScrollWrapper.querySelectorAll('.page-item');

        // 需要哪些变量来控制

        // startX moveX ->  startX 到 moveX的距离要计算出来 也就是scroppWrapper要移动的距离
        let startX = 0,
            pageIndex = 0, // 第几个page-item的索引
            distancex = 0,// 移动的距离
            isMove = false; // 默认不切换

        const init = () => {
            bindEvent
        }


        function bindEvent() {
            oScrollWrapper.addEventListener('touchstart', handleTouchStart, false);
            oScrollWrapper.addEventListener('touchmove', handleTouchMove, false);
            oScrollWrapper.addEventListener('touchend', handleTouchend, false);
        }

        // 拿到第一个手指坐标
        function handleTouchStart(e) {
            // touches单指触控 手指就是[0]
            startX = e.touches[0].clienX;
        }

        function handleTouchMove() {
            // 手指滑动的当前的坐标
            const moveX = e.touches[0].clienX;

            // 做边界
            // 判断用户是左划还是右划 --> 如果moveX > startX 往右划; 否则左划
            // 右划且是第一页 || 左划且是最后一页 return
            if ((moveX > startX && pageIndex === 0)
                ||
                (moveX < startX && pageIndex === oPageItems.length - 1)) {
                return;
            }

            // 不是第一/最后一页 -> 要划动 算出移动的距离
            distanceX = moveX - startX;

            // 做页面移动的效果和动画 页面滑动的距离: 自己的宽度
            // 第二页: - pageWidth * 1 + distanceX
            setTranslateX(- pageWidth * pageIndex + distanceX);

            // 开启move
            isMove = true;
        }

        // 做页面移动的效果和动画
        function setTranslateX(transX) {
            oScrollWrapper.style.transition = 'all .1s';
            // translateX水平左右移动 正值右移 负值左移
            oScrollWrapper.style.transform = `translateX(${transX}px)`;
        }

        function handleTouchend() {
            // 在move的情况下，计算移动的距离是否大于1/3 切换/回弹
            if(isMove){
                if(Math.abs(distanceX) > pageWidth /3 ){
                    // 切换

                    // 修改pageIndex 当前页面的索引号
                    // 判断是左划还是右划 右划
                    if(moveX > startX){
                        pageIndex --;
                    }

                    // 左划
                    if(moveX < startX){
                        pageIndex ++;
                    }
                } 
                // 
                setTranslateX(- pageWidth * pageIndex);
            }

            startX = 0;
            moveX = 0;
            isMove = false;
        }

        init();

    </script>
</body>

</html>

4. 代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 1000px -> 100rem
        document.documentElement.style.fontSize = document.documentElement.clientWidth / 37.5 + 'px';
    </script>
    <style>
        body {
            margin: 0
        }

        html,
        body,
        #app {
            height: 100%;
        }

        div {
            width: 100%;
            display: flex;
            flex-direction: column;
        }

        .slide-page {
            position: relative;
            height: 100%;
            overflow: hidden;
        }

        .scroll-wrapper {
            position: absolute;
            width: 150rem;
            height: 100%;
            flex-direction: row;
        }

        .page-item {
            height: 100%;
            flex: 1;
        }

        .page-item .inner {
            height: 100%;
            justify-content: center;
            align-items: center;
            font-size: 5rem;
        }

        .page-item:nth-child(1) .inner {
            background-color: orange;
        }

        .page-item:nth-child(2) .inner {
            background-color: red;
        }

        .page-item:nth-child(3) .inner {
            background-color: pink;
        }

        .page-item:nth-child(4) .inner {
            background-color: blue;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="slide-page">
            <div class="scroll-wrapper">
                <div class="page-item">
                    <div class="inner">1</div>
                </div>
                <div class="page-item">
                    <div class="inner">2</div>
                </div>
                <div class="page-item">
                    <div class="inner">3</div>
                </div>
                <div class="page-item">
                    <div class="inner">4</div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 拿宽度
        const oSlidePage = document.querySelector('.slide-page'),
            pageWidth = oSlidePage.offsetWidth;

        // 要滚动
        const oScrollWrapper = oSlidePage.querySelector('.scroll-wrapper');

        // 根据长度来判断边界
        const oPageItems = oScrollWrapper.querySelectorAll('.page-item');

        // 需要哪些变量来控制

        // startX moveX ->  startX 到 moveX的距离要计算出来 也就是scroppWrapper要移动的距离
        let startX = 0,
            pageIndex = 0, // 第几个page-item的索引
            distancex = 0,// 移动的距离
            isMove = false; // 默认不切换

        const init = () => {
            bindEvent
        }


        function bindEvent() {
            oScrollWrapper.addEventListener('touchstart', handleTouchStart, false);
            oScrollWrapper.addEventListener('touchmove', handleTouchMove, false);
            oScrollWrapper.addEventListener('touchend', handleTouchend, false);
        }

        // 拿到第一个手指坐标
        function handleTouchStart(e) {
            // touches单指触控 手指就是[0]
            startX = e.touches[0].clienX;
        }

        function handleTouchMove() {
            // 手指滑动的当前的坐标
            const moveX = e.touches[0].clienX;

            // 做边界
            // 判断用户是左划还是右划 --> 如果moveX > startX 往右划; 否则左划
            // 右划且是第一页 || 左划且是最后一页 return
            if ((moveX > startX && pageIndex === 0)
                ||
                (moveX < startX && pageIndex === oPageItems.length - 1)) {
                return;
            }

            // 不是第一/最后一页 -> 要划动 算出移动的距离
            distanceX = moveX - startX;

            // 做手指拖移的动画效果
            // 第二页: - pageWidth * 1 + distanceX
            setTranslateX(- pageWidth * pageIndex + distanceX);

            // 开启move
            isMove = true;
        }

        // 做页面移动的效果和动画
        function setTranslateX(transX) {
            // 这个函数的作用是将 .scroll-wrapper 元素（包含多个 .page-item 页面项的滚动容器）沿X轴移动指定的像素距离 transX
            oScrollWrapper.style.transition = 'all .1s';
            // translateX水平左右移动 正值右移 负值左移
            oScrollWrapper.style.transform = `translateX(${transX}px)`;
        }

        function handleTouchend() {
            // 在move的情况下，计算移动的距离是否大于1/3 切换/回弹
            if(isMove){
                if(Math.abs(distanceX) > pageWidth /3 ){
                    // 切换

                    // 修改pageIndex 当前页面的索引号
                    // 判断是左划还是右划 右划
                    if(moveX > startX){
                        pageIndex --;
                    }

                    // 左划
                    if(moveX < startX){
                        pageIndex ++;
                    }
                } 
                // 
                setTranslateX(- pageWidth * pageIndex);
            }

            startX = 0;
            moveX = 0;
            isMove = false;
        }

        init();

    </script>
</body>

</html>

whComeon
关注
原生JS实现移动端上下滑动一次一屏（仿抖音）
qq_48972217的博客
06-14 3445
功能如下: 头部： 附近、关注、推荐选项卡的切换 左右滑动功能、头部选项卡跟随动画 上下滑动划动一屏，滑动超过头部刷新 双击选项卡回到顶部 完美注释~ 上代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
JS滑动滚动的n种方式
MyWay
02-22 2万+
window.scroll｜window.scrollBy｜window.scrollTo｜window.scrollByLines｜window.scrollByLines｜element.scrollIntoVIew｜srcollTop | 判断是否某元素的外层可滑动and so on，应有尽有
js中获取body html元素
weixin_44638167的博客
09-10 1万+
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Do
使用JavaScript实现滑动动画的几种方法
微赚开发者技术分享博客
06-30 1903
滑动动画通常是指元素在页面上平滑移动或改变尺寸的过程，通过改变元素的位置、大小或样式属性，使其产生视觉上的动态效果。通过本文的介绍，我们详细探讨了使用JavaScript实现滑动动画的几种方法：使用CSS过渡属性、JavaScript定时器和第三方动画库（Tween.js）。Tween.js是一个轻量级的JavaScript动画库，提供了丰富的动画效果和配置选项。JavaScript定时器是另一种实现滑动动画效果的方法，通过逐帧改变元素的位置或样式属性，从而实现平滑的动画效果。// 定义滑动动画函数。
js 移动窗口实现滚动效果
weixin_72923430的博客
07-17 547
【代码】js 移动窗口实现滚动效果。
JavaScript滑动选择效果实现指导
weixin_42602368的博客
09-29 2002
本文还有配套的精品资源，点击获取 简介：本文介绍了如何利用JavaScript实现用户界面中的上下滑动选择和左右滑动选择两种交互效果。这些效果对于提升移动设备用户体验至关重要。文章首先讲解了如何通过事件监听来捕捉滑动操作，并展示了如何计算滚动偏移量和设置平滑动画。接着，针对左右滑动选择，文章说明了如何判断滑动方向，并进行视图切换。此外，还涉及了如何在实现中添加回弹效果以增强...
iSlider 项目安装与配置指南
最新发布
gitblog_00410的博客
04-11 699
iSlider 项目安装与配置指南 1. 项目基础介绍 iSlider 是一个高性能的 H5 页面全屏滑动组件，它追求极致的性能、简洁的代码和易用的接口。适用于移动端和混合应用的页面滑动需求。 **主要编程语言：**HTML 和 JavaScript 2. 项目使用的关键技术和框架 **HTML5：**使用 HTML5 的最新特性来构建页面结构。 **CSS3：**利用 CSS3 实现动画效果，...
html手指滑动滚动图片,js原生实现移动端手指滑动轮播图效果的示例
weixin_36022526的博客
06-04 494
Documenthtml{height:100%;}body{width: 100%;height:100%;margin:0;overflow: hidden;}.wrap{position: relative;overflow: hidden;}.box{position: absolute;list-style: none;left:0;top:0;padding:0;margin:0;}....
普通pc端开发与移动端开发区别
aliyunshuju的博客
03-12 6774
1，普通pc端开发与移动端开发区别。 普通pc端开发，我理解就是你拿电脑打开的网页都算【这不是废话么】。 那么移动端前端开发工程师，说白了就很好理解了，做手机网页的前端开发工程师。 这么一比，是不是感觉，移动端开发简单多了？ 没错，我转了之后发现还真是呢。。。【还有点小激动】 pc，我们需要考虑什么呢？有点开发经验的同学都知道，ie6-11，firefox，chrome，safari都得兼容的吧。...
使用JavaScript实现页面滑动切换效果
风清扬的专栏
08-09 3757
我们使用CSS的动画效果将当前页面向上滑动，同时添加一个延迟，确保动画完成后再显示下一页。最后，我们在动画完成后移除相应的CSS样式。同样，我们使用CSS的动画效果将当前页面向下滑动，并在动画完成后显示上一页。在现代Web页面设计中，页面滑动切换效果已经成为了一种常见的设计要求，能够提升用户体验，增加页面的交互性。在JavaScript中，我们首先获取到所有的页面元素，并初始化当前页面为第一个页面。在脚本文件中，我们将使用JavaScript来控制页面的显示和隐藏，并且通过添加CSS样式来实现滑动效果。
移动端左右滑动切换页面效果(纯-JavaScript)
QTXLY的博客
11-23 3781
移动端：左右滑动切换页面效果
如何解决mui-scroll-wrapper组件在动态获取数据时滚动或者滑动失效的问题（亲测有效）
悲催的程序猿的博客
08-18 4869
第一次些博客，如果有写的不好的地方，请见谅！！ ##由于需要使用MUI制作公司的一个APP，因此跟着MUI官方帮助文档进行了代码的测试，大部分组建都能够达到想要的效果，但是在测试popover+scroll组件共同使用时，发现了一些问题. 当数据为写死或者称为静态数据时，数据功能都是正常的，并且可以正常弹出等； 数据动态获取时如果出现滚动条无法使用或者失效，则可以使用以下代码解决，其中最主要的是...
web ui自动化之模拟页面滑动 - 使用js
XiYang的博客
06-23 5017
我们浏览web网站时，经常需要进行滑动页面操作。在Selenium自动化测试过程中，可以通过execute_script 执行js语句实现页面滑动。常见的滑动场景分为四种：滑动至底部、滑动至顶部、滑动至具体位置、滑动至目标元素可见。可以在浏览器–F12–切换到控制台，输入js代码，试验是否达到预期，在写进python代码中 代码如下（示例）： 2.向上滑动至元素可见 代码如下（示例）： 二、滑动页面至底部/顶部 1.滑动到页面底部 代码如下（示例）： 2.滑动到页面顶部 代码如下（示例）： 三、滑动页面指定
Javascript移动端触屏滑动事件详解
tianxianghuiwei的博客
11-11 2995
同样首先阻止页面的滚屏行为，touchmove触发后，会生成一个event对象，在event对象中获取touches触屏列表，取得第一个touch,并记下pageX,pageY的坐标，算出差值，得出手指滑动的偏移量，使当前DOM元素滑动。触发touchstart事件后，会产生一个event对象，event对象里包括触摸列表，获得屏幕上的第一个touch,并记下其pageX,pageY的坐标。changedTouches: //涉及当前事件的手指的列表，尽量使用这个代替touches。
移动端手机网页强制横屏或全屏模仿横评的js和css3方法
热门推荐
懒得安分的博客
08-17 2万+
移动端手机网页强制横屏或全屏模仿横评的js加css3方法最近项目有电子合同方面的开发，需要电子签字，（用的jsignature插件，如果有空以后单独写个使用心得）。在手机小屏幕上签字，全屏横屏才是最好的体验。用户竖屏打开页面时要去签字，提示用户把手机横过来，这样体验太low了，程序员要考虑能用技术解决的就不要去劳烦用户（免得他烦了回头打电话咬你）。 先来几个检测屏幕方向的方法：//判断屏幕方向 if
JS滚动页面
qq_54367095的博客
04-05 1396
document.documentElement.scrollTop必须写到函数内。环境对象指的是函数内部特殊的变量this，他代表当前函数运行时所处的环境。当加上属性选择器后，只有有value属性的input会变红。事件对象.target.tagName获取点击的对象。如果将函数A作为参数传递给函数B，则称A为回调函数。得到的数据是数字型 不带单位 可读写。此时两个input中的内容都会变红。自定义属性也可以使用属性选择器。谁调用，this就指向谁。
vue mui-scroll-wrapper 导航栏横向滑动
stayreal_OAOA
11-05 1364
import MintUI from 'mint-ui' Vue.use(MintUI) <template> <div class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted" > ...
关于使用 MUI .mui-scroll-wrapper 中遇到的坑
dingct的博客
02-20 1万+
使用过程中，遇到手机网页滚动失效，或者代码滚动失灵，要手动滚动的情况。 要在滚动之后添加一个 mui('.mui-scroll-wrapper').scroll().reLayout();  代码才可以。 //初始化区域滚动的 (function($){ $(".mui-scroll-wrapper").scroll({ bounce: false,//滚动条是否有弹力默...
原生JS实现整屏滚动（竖屏）
GJINW的博客
05-13 1608
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do
Vue2+el-table实现表格行上下滚动，表格单元格内容溢出左右滚动 TextScroll、TableWrapper
JCM_ZZ的博客
11-26 1754
el-table 实现行滚动；单元格内容溢出左右滚动
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值