开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

js移动端滑动滚动

基础概念

JavaScript 移动端滑动滚动是指在移动设备上通过触摸屏幕来控制页面内容的滚动行为。这种交互方式是移动设备上常见的用户界面元素之一，它允许用户通过手指滑动来浏览页面的不同部分。

相关优势

用户体验：滑动滚动提供了直观和自然的交互方式，使得用户能够轻松地浏览长页面。
性能优化：现代浏览器对滚动事件进行了优化，可以实现流畅的滚动效果。
响应式设计：滑动滚动能够很好地适应不同尺寸的移动设备屏幕。

类型

垂直滚动：页面内容沿垂直方向滚动。
水平滚动：页面内容沿水平方向滚动。
无限滚动：当用户滚动到页面底部时，自动加载更多内容。

应用场景

新闻网站：用户可以通过滑动查看不同的新闻文章。
电商网站：产品列表可以通过滑动滚动展示更多商品。
社交媒体：用户可以滑动浏览朋友圈或微博动态。

示例代码

以下是一个简单的 JavaScript 示例，用于实现基本的垂直滚动效果：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scroll Example</title>
<style>
  .scroll-container {
    width: 100%;
    height: 300px;
    overflow-y: auto;
    border: 1px solid #ccc;
  }
  .content {
    padding: 20px;
  }
</style>
</head>
<body>

<div class="scroll-container">
  <div class="content">
    <!-- 这里放置需要滚动的内容 -->
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
    <!-- 更多内容 -->
  </div>
</div>

<script>
  // 可以添加事件监听器来处理滚动事件
  document.querySelector('.scroll-container').addEventListener('scroll', function() {
    console.log('滚动位置:', this.scrollTop);
  });
</script>

</body>
</html>

遇到的问题及解决方法

问题1：滚动不流畅

原因：可能是由于页面中存在大量的DOM操作或者复杂的CSS样式导致的性能问题。

解决方法：

使用虚拟滚动技术，只渲染可视区域内的元素。
减少DOM操作，使用防抖（debounce）或节流（throttle）技术优化滚动事件处理函数。

问题2：触摸反馈不明显

原因：移动设备上的触摸反馈机制没有被充分利用。

解决方法：

添加CSS样式来增强触摸反馈，例如使用touch-action属性。
使用JavaScript库如Hammer.js来处理复杂的触摸事件。

问题3：滚动位置丢失

原因：页面刷新或者路由切换可能导致滚动位置丢失。

解决方法：

在页面加载时记录滚动位置，并在页面恢复时设置回去。
使用前端路由库（如React Router）提供的滚动恢复功能。

以上就是关于JavaScript移动端滑动滚动的基础概念、优势、类型、应用场景以及常见问题的解决方法。希望这些信息对你有所帮助。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

原生JS实现移动端滑动反弹

什么是 Touch滑动？就是类似于 PC端的滚动事件，但是在移动端是没有滚动事件的，所以就要用到 Touch事件结合 js去实现，效果如下： ? 1. 准备工作什么是移动端的 Touch事件？...在移动端 Touch事件可以细分成三种，分别是： touchstart、 touchmove和 touchend，并且 touch事件必须要用 addEventListener去监听。...基本结构此案例模拟的是移动端的一种滑动菜单效果。...先来张示意图，怎么通过 js 让列表滑动起来 ?...maximum-scale=1.0, minimum-scale=1.0"> 移动端

10.4K2 0

移动端滚动加载-----jQuery 和原生JS

判断滚动条到底部，需要用到DOM的三个属性值，使用jQuery分别是： $('body').scrollTop()为滚动条在Y轴上的滚动距离。...从这个三个属性的介绍就可以看出来，滚动条到底部的条件即为('body').scrollTop() +(window).height() == 1.绑定滚动监听事件 $(window).bind('scroll...bind('scroll',isScrollBottom);},2000); } } $(window).bind('scroll',isScrollBottom); 原生JS...：scrollTop、clientHeight、scrollHeight scrollTop为滚动条在Y轴上的滚动距离。...ajax数据请求 //数据渲染后再次绑定监听事件window.addEventListener('scroll',isScrollB0ttom ,false); 　　} }; 注意： 1.每次满足滑动到底部进入判断先解除监听事件

22.3K1 0

移动端滑动切换

class="swiper-slide"> 2 js.../jquery-3.1.1.min.js"> js/swiper.min.js">...js/classify.js"> classify.js自定义的js $(function...(){ /*滑动切换*/ var swiper = new Swiper('.swiper-container', { onSlideNextStart: function

1.9K5 0

移动端滚动研究

移动web滚动问题在移动端如果使用局部滚动，意思就是我们的滚动在一个固定宽高的div内触发，将该div设置成overflow:scroll/auto;来形成div内部的滚动，这时我们监听div的onscroll...不能实时触发 | | android | 实时触发| 实时触发 | | ios wkwebview内核 | 实时触发| 实时触发 | 不能实时触发表现：只在手指触摸的屏幕上一直滑动时和滚动停止的那一刻才触发...方案比较第一种方案由于惯性滚动的时机时由js自己控制所以可以拿到滚动触发阶段的scrolltop值，并且滚动的回调函数onscroll在滚动的阶段都会触发。...在使用模拟滚动时，浏览器在js层面会消耗更多的性能去改变dom元素的位置，在dom复杂层级深的页面更为高，所以在长列表滚动时还要使用正常滚动更好。...使用rAF（requestAnimationFrame）触发滚动事件如果页面只需要兼容高版本浏览器或应用在移动端，又或者页面需要追求高精度的效果，那么可以使用浏览器的原生方法 rAF（requestAnimationFrame

3.2K2 0

JS滑动滚动的n种方式

JS滑动滚动的n种方式 # 阅读本文，你将：了解原生JS实现页面滚动的多种方式了解这多种方式可以对应上的效果以及推荐的应用场景多个滑动方面的坑以及相应（如果有）的解决方案获得一些有用的函数...1.3 浏览器的支持度 1.4 示例与推荐使用场景原始位置图我们定位如图红框的元素，从顶部开始示例 1.4.1 scrollIntoVIew() 页面滑动至父级容器，但是子项并没有被滑动到可视区域...1.4.2 scrollIntoView(false) 页面滑动到底部，该元素从下方进入可视区域 1.4.3 scrollIntoView({block:"center",inline:"center..."}) 仍然是没有看到我们要呈现的元素，疑似原因为我们的选定元素的爷爷级元素才是可滑动的 1.5 补充 scrollIntoView和scrollIntoViewIfNeeded的区别在于，第一前者的支持性较高...有出现父容器滑动不到指定地方的问题，可以两次调用api（注意异步） 2 设置scrollTop/scrollLeft 2.1 基本用法 element.scrollTop=100; 当我们获取到一个元素

6.6K1 0

移动端局部dom实现滚动

移动端局部dom添加滑动事件源码 /** * moveTopLimit: 移动过程中，随着手指的滑动 dom的偏移量 * modifyTopLimit: 触发touchEnd的时候我们需要进行吸顶这样的一个交互...this.moveY = event.touches[0].clientY; this.offset = (this.moveY - this.oldMoveY); // 获取dom当前滚动值...this.getCurDistance(); this.offsetSum = this.offset + this.curDistance; // 设置滑动范围

9501 0

javascript禁止移动端网页滚动

禁止网页滚动，电脑端其实只要给body加overflow: hidden;css即可，移动端测试发现谷歌可以，国产浏览器阵亡，其实我记得很久之前我遇到过这个问题，最后好像用纯css解决了，但是想不起来了...，于是乎百度搜了个js的方法，故记录下！...mo=function(e){e.preventDefault();}; document.addEventListener("touchmove",mo,{passive:false});//禁止页面滑动...document.removeEventListener("touchmove",mo,{passive:false});//恢复可滑动尝试给body的css设置position: fixed;来解决问题...，但是这样网页就乱了，所以最终还是用js解决了下，如果哪位大佬知道怎么文雅的用css解决这个问题，请务必留言告知，谢谢！

1.6K2 0

js - 移动端的超出滚动功能，附带滚动条，可解决弹层中滚动穿透问题。

背景: 弹层里边有可滚动区域时，在移动端的坑我就不多说了。找了很多解决滚动穿透的方案，最终都不能完美解决。一气之下自己js撸了一个。效果图： ?...原理： 1、解决滚动穿透：通过给弹层绑定touchmove和mousewheel事件，取消默认行为实现。...2、取消默认行为后不能滚动：给需要滚动展示的区域绑定touchstart、touchmove和mousewheel事件，监听触发区域的Y值，对应修改可滚动区域的translateY值，实现滚动效果。...缺点/不足：滑动起来略显卡顿，用户体验不好，有大佬给提示下怎么优化吗？...touchToBottom(params.scroll, params.bar); 117 } 118 }); 119 } 120 完整demo见github：移动端超出滚动效果

7.3K1 0

移动端滚动分页解决方案

什么是移动端滚动分页当用户滑动页面到底部时，便会触发页面的加载分页数据功能解决方案解决方案目前主流的解决方案主要有两个，scroll 和 IntersectionObserver scroll...是页面滚动事件，当页面滚动时，判断滚动条距离是否触底，如果是，便执行分页逻辑 IntersectionObserver 是一个用于观察元素可见性变化的API。...它可以用于检测元素是否进入或离开视口（viewport），或者与其他元素发生交叉 scroll 目前m端淘宝采用的是 scroll，它的特点是兼容性够好。...几乎全部的浏览器都支持常用，缺点便是事件触发太频繁，因为每一滚动滚动都需要进行判断。当我们移除掉淘宝 body元素上的scroll事件时，分页逻辑便失效了。...，当页面滚动时，判断滚动条距离是否触底，如果是，便执行分页逻辑优点是兼容性好，缺点是事件触发频繁，性能差 IntersectionObserver 是一个用于观察元素可见性变化的API。

581 0

web移动端：touchmove实现局部滚动

总结一下最近项目用到的一个功能点，具体要求如下： body中会呈现一个可滚动的长页面，在点击某个按钮的时候，会出现一个弹出框，由于弹出框的内容较长，会出现滚动条，但是要保证位于弹框下部的body在弹框滚动的时候不触发滚动事件...touchmove事件的要点主要是移动方向的判断和滑动边界的判断移动方向的判断 var replyListTop=parseInt($(".replyList").css("top")...if(moveY < 0){ } //向下滑动 else if(moveY > 0){ } }); 移动边界的判断 A.向上滑动到上边界...true:false B.向下滑动到下边界由于滚动区域是包裹在replyContainer里面的，所以滚动区域的初始top值为标题区域的高度，只要标题区域的高度 == 滚动区域的top值...replyListTop : 3.2*fontHeight; } js完整代码 function replyCengShow(){ var startX; var startY

1.4K2 0

移动端框架滚动类 iScroll5

HTML5学堂：移动端开发中，经常遇到需要模拟APP的效果header或是footer固定住，里面的内容区域实现滚动。但是对低端手机单纯使用CSS是兼容不了，需要JavaScript的支持。...本文讲解了使用iScroll5的使用方法，解决了固定高度的容器内滚动内容。...iscroll诞生的意义之所以iscroll会诞生，主要是因为无论是在以前的iphone、ipod、android 或是更早前的移动webkit都没有提供一种原生的方式来支持在一个固定高度的容器内滚动内容...如果希望ul中的内容发生滚动，需要在外层添加一层，同时将iScroll的功能添加到最外层上。...scrollToElement(el, time, offsetX, offsetY, easing) 滚动到某个元素 offsetx和offsety定义像素偏移，这样你可以滚动到元素加上一个指定的偏移量

1.2K9 0

移动端弹框后禁用页面滑动

在web开发中，有时候我们需要实现在页面上点击某个按钮弹出窗口，并禁用页面滑动或滚动的需求。以下是我本人的做法，望大家多多提出意见或建议。直接上代码：移动端弹框禁止背景滑动 js/swiper.min.js"> js"> * { font-size: 0.35rem; line-height...-- 如果需要滚动条 --> <!

2.4K6 0

移动端禁止遮罩层以下屏幕滑动

当做弹窗效果时，希望弹窗出现的时候网页不可再上下滚动、翻页，可以用body{overflow:hidden}，可是做手机站的时候，就不兼容了。...样式部分： .ovfHiden{overflow: hidden;height: 100%;} jquery部分： $('html,body').addClass('ovfHiden'); //使网页不可滚动...$('html,body').removeClass('ovfHiden'); //使网页恢复可滚动

1.5K1 0

js判断移动端和pc端

//判断是手机端还是pc端 function isPc(){ if(window.navigator.userAgent.match(/(phone|pad|pod...MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)) { return true; // 移动端...}else{ return false; // PC端 } }

10.8K6 1

移动端多个Tab栏左右滑动的实现

如下图，实现的目的就是如果有多个tab标签，但是布局只能显示三个，其余的往后排列，可以滑动找到。实现代码 <!...} .bq { list-style: none; font-size: 22px; margin: 10px 30px 15px 10px; } /*隐藏滚动条

2.9K2 0

【总结】1823- 移动端滚动穿透与滚动溢出解决方案

滚动穿透问题描述在移动端 WEB 开发的时候（小程序也雷同），如上录屏所示，如果页面超过一屏高度出现滚动条时，在 fixed 定位的弹窗遮罩层上进行滑动，它下面的内容也会跟着一起滚动，看起来好像事件穿透到下面的...问题原因能够猜想是文档（document）的滚动事件被触发了，如果能禁用滚动事件就好办了。...问题描述如上录屏所示，弹窗内也含有滚动元素，在滚动元素滚到底部或顶部时，再往下或往上滚动，也会触发页面的滚动，这种现象称之为滚动链（scroll chaining）, 但是感觉滚动溢出（overscroll...值描述 auto 默认效果，元素的滚动可以传播到祖先元素。 contain 阻止滚动链，滚动不会传播到祖先元素，但是会显示节点自身的局部效果。...，从而页面滚动也不会触发了，而在滚动之间则不做处理。

6081 1

vue移动端实现手机左右滑动入场动画

更多内容请见原文，原文转载自：https://blog.csdn.net/weixin_44519496/article/details/119353623

7782 0

从 antDesign 来窥探移动端“滚动穿透”行为

在移动端，我们完全可以使用一种通用的解决方案来解决上述造成“滚动穿透”意外行为：无论元素是否可以滚动时，每次元素的拖拽事件触发时我们只需要进行判断：寻找当前触发 touchMove 事件 event.target...通用 Hook 方案 useTouch 拖动位置首先，我们先来看一个有关于移动端滚动的简单 Hook： import { useRef } from 'react' const MIN_DISTANCE...通过 useTouch 这个 hook 我们可以在移动端配合 touchstart、onTouchMove 轻松的计算出手指拖动时的方向和距离。...上述的代码仍然是按照我们在文章开头讲述的解决思路来解决移动端滚动链接的意外行为。...为 body 添加 overflow:hidden 其实在移动端并没什么太大的实际作用，我们 touchmove 事件中的处理逻辑对于阻止意外滚动行为的发生已经完全足够了。

5872 0

js移动端中touch事件

触摸事件是在移动设备(如智能手机或平板电脑)上查看页面时触发的事件。它们允许您跟踪多点触摸事件。...我们有4个触摸事件: touchstart 触摸事件已经启动(触摸表面) touchend 一个触摸事件已经结束(表面不再被触摸) touchmove 触摸移动手指(或任何接触设备的东西)在表面移动 touchcancel...clientX / clientY 无论是否滚动，鼠标指针相对于浏览器窗口的x和y坐标 screenX / screenY 屏幕坐标中鼠标指针的x和y坐标 pageX / pageY 页面坐标(包括滚动

8.9K2 0

Tips-移动端滑动固顶效果(position: sticky)

先放个图看看滑动固顶是啥效果： image.png 中间那个 tab 条，平常的时候是固定的，等到页面滑上去的时候，又像 fixed 一样贴在顶部。...Android 上实现类似效果这里我们不得不借助 js 和 positon:fixed。...添加一段 js： var isStopTimer = null; var offsetTop = $('.content-a').offset().height;...position: fixed; } 在需要固顶的时候我们将元素的 positon 改为 fixed，但是这里又有个坑，设置元素为 fixed 的时候，相应元素是脱离文档流的，也就是没有高度了，仔细看滑动的时候...为了解决这个跳动，我们可以让原本在下面那个元素加点高度，然后和 sticky 元素重合，为了以后改动页面的时候不影响这个逻辑，用 js 去算高度会比较好。

2.1K6 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭