原生js禁止页面滚动

【原生js禁止页面滚动】的更多相关文章

原生js禁止页面滚动

// 开启.禁止页面滚动 bodyScroll: { e(e) { e.preventDefault();// 注意此处代码片段必须这样提出来已保证传入下边两个事件的处理程序一样才生效,分别写到事件处理程序中不生效. }, // 开启滚动 open() { document.body.removeEventListener('touchmove', this.e, false); }, // 禁止滚动 close() { document.body.addEventListener('touch…

js禁止页面滚动

开发移动端页面的时候有一个很比较常见的需求,在出现弹窗时,禁止滑动弹窗后面的主体页面.如何实现呢,往下看 js实现整个页面禁止滚动: document.body.addEventListener('touchmove', function(e){ e.preventDefault(); }, { passive: false }); //passive 参数不能省略,用来兼容ios和android passive是干吗用的呢,设置该属性的目的主要是为了在阻止事件默认行为导致的卡顿.等待监听器的执…

js原生 + jQuery实现页面滚动字幕

js原生/jQuery实现页面滚动字幕效果 17:45:49 在新闻列表或者文章列表信息等页面中很容易要求实现字幕滚动的效果,以下为简单的实现页面中滚动字幕的效果 1.jQuery实现页面滚动字幕效果代码如下: <div class="box"> <ul class="list"> <li>这是滚动加载的第1条数据</li> <li>你猜猜这是第几条滚动加载的文字</li> <li>…

WOW.js – 在页面滚动时展现动感的元素动画效果

在一些网页上,当你滚动页面的时候会看到各式各样的元素动画效果,非常动感.WOW.js 就是一款帮助你实现这种 CSS 动画效果的插件,很容易定制,你可以改变动画设置喜欢的风格.延迟.长度.偏移和迭代等. 您可能感兴趣的相关文章精心挑选的美轮美奂的 jQuery 图片特效插件精心挑选的优秀jQuery Ajax分页插件和教程精心挑选的优秀 jQuery 文本特效插件和教程 8款非常棒的响应式 jQuery 幻灯片插件推荐精心挑选12款优秀 jQuery 手风琴插件和教程立即下载 …

js禁止滚动条滚动，并且滚动条不消失，页面大小不变

//禁止滚动条滚动 function unScroll() { var top = $(document).scrollTop(); $(document).on('scroll.unable',function (e) { $(document).scrollTop(top); }) } //移除禁止滚动条滚动 function removeUnScroll() { $(document).unbind("scroll.unable"); } $('body').css('overf…

js禁止页面复制禁用页面右键菜单的代码

js实现禁止页面复制功能.禁用页面右键菜单等功能. <body oncontextmenu="return false">禁用网页右键菜单,但是仍然可以使用快捷键复制. js代码禁用复制功能: <script type="text/javascript"> document.body.onselectstart=document.body.oncontextmenu=function(){ return false;} </s…

WOW.js – 让页面滚动更有趣

演示1 演示2-仿oppo首页下载简介有的页面在向下滚动的时候,有些元素会产生细小的动画效果.虽然动画比较小,但却能吸引你的注意.比如刚刚发布的 iPhone 6 的页面(查看).如果你希望你的页面也更加有趣,那么你可以试试 WOW.js. WOW.js 依赖 animate.css,所以它支持 animate.css 多达 60 多种的动画效果,能满足您的各种需求. 浏览器兼容 IE10+ Chrome Firefox Opera Safari IE6.IE7 等老旧浏览器不支持 CSS…

原生js实现平滑滚动

在以前的项目中有用到,在此整理一下: html部分 <span id="gotop">回到顶部</span> JS部分 // 使用requestAnimationFrame代替setTimeout // requestAnimationFrame随显示器刷新一帧而执行一次函数,更精确 if (!window.requestAnimationFrame) { window.requestAnimationFrame = function (fn) { return…

【移动端】js禁止页面滑动与允许滑动

禁止页面滑动通常静止滑动方案:(阻止滑动事件) window.ontouchmove=function(e){ e.preventDefault && e.preventDefault(); e.returnValue=false; e.stopPropagation && e.stopPropagation(); return false; }; 有部分机型不支持以上静止滑动方案,可使用:(点击后页面浮动到指定位置不动将body的position设置为fixed) $…

[HTML/JS] JQuery 页面滚动回到顶部

HTML: <html> <body> <div id="back-to-top" style="cursor:pointer; display:block;"> 上升按钮 </div> </body> </html> JS: $(function(){ //当滚动条的位置处于距顶部100像素以下时,跳转链接出现,否则消失 $(function () { $(window).scroll(fun…

原生JS实现页面内定位

需求:点击跳转到页面指定位置 <div id="test">点击跳转到此处</div> [法一]: 利用a标签的锚点跳转 <a href="#test">点击跳转</a> 由于锚点跳的原理是改变哈希值,所以会改变url [法二]: 用js的scrollIntoView方法 document.getElementById('test').scrollIntoView() 此方法可以让当前的元素滚动到浏览器窗口的可视区…

WOW.js——在页面滚动时展现动感的元素动画效果

插件描述:WOW.js 是一款可以实现滚动页面时触发CSS 动画效果的插件,动态效果可以使网站显示更有动感. 当页面在向下滚动的时候,使用WOW.js可以让页面元素产生细小的动画效果,从而引起浏览者注意力. WOW官网:https://www.delac.io/wow/docs.html 使用教程 1.WOW.js 依赖 animate.css. 可以通过更改设置链接到另一个CSS动画库,在 head内引入animate.css或者animate.min.css. <link rel="s…

jquery 禁止页面滚动-移动端

禁止 window.ontouchmove=function(e){ e.preventDefault && e.preventDefault(); e.returnValue=false; e.stopPropagation && e.stopPropagation(); return false;} 取消禁止 window.ontouchmove=function(e){ e.preventDefau…

WOW.js – 让页面滚动更有趣

官网:http://mynameismatthieu.com/WOW/ 建议去官网一看下载地址:https://github.com/matthieua/WOW 浏览器兼容 IE10+ Chrome Firefox Opera Safari IE6.IE7 等老旧浏览器不支持 CSS3 动画,所以没有效果:而 wow.js 也使用了 querySelectorAll 方法,IE 低版本会报错.为了达到更好的兼容,最好加一个浏览器及版本判断. 1.wow.js依赖于animate.cs…

html禁止页面滚动

<div @touchmove.prevent></div> @touchmove.prevent //加到标签上禁止滚动…

[js常用]页面滚动的顶部,指定位置或底部,平滑滚动

js平滑滚动到顶部.底部.指定地方 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js平滑滚动到顶部.底部.指定地方</title> <script type="text/javascript" src="https://cdnjs.cloudflare.com/aj…

jQuery 遮盖层弹出后禁止页面滚动

css部分 .ovfHiden{ overflow: hidden; height: 100%; } js部分 $(".btn1").click(function(){ $('html,body').addClass('ovfHiden'); //使网页不可滚动 $(".layer").show(); }) $(".btn2").click(function(){ $('html,body').remo…

js禁止页面刷新禁止用F5键刷新,禁止右键

aos.js让页面滚动变得丰富

(转)<script src="js/jquery-2.1.1.min.js" type="text/javascript"></script> <script src="js/highlight.min.js"></script> <script src="dist/aos.js"></script> <script> AOS.init({…

原生js为页面添加爱心特效和判断手机端还是电脑端登录

<script type="text/javascript"> (function (window, document, undefined) { var hearts = []; window.requestAnimationFrame = (function () { return window.requestAnimationFrame || window.webkitRequestAnimationFrame ||…

原生js获取页面所有的checkbox

<!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" con…

js禁止页面所有a链接访问

原生js获取页面中所有checkbox

var inputs = document.getElementsByTagName("input");//获取所有的input标签对象 var checkboxArray = [];//初始化空数组,用来存放checkbox对象. for(var i=0;i<inputs.length;i++){ var obj = inputs[i]; if(obj.type=='checkbox'){ checkboxArray.push(obj); } } 前端交流群,群文件提供大量文档…

JS - 获取页面滚动的高度

document.documentElement.scrollTop||document.body.scrollTop…

H5禁止页面滑动/滚动

禁止页面滚动--完美解决方案,滚动条显示与否,手持设备兼容与否禁止页面滚动有三种方法 1,依靠css 将页面 document.documentElement.style.overflow='hidden'; document.body.style.overflow='hidden';//手机版设置这个. 如果设置了如上,页面的滚动条将会消失,此时鼠标滚轮失效. 但是你用键盘的上下左右键,你会发现,页面仍然可以滚动. 别着急往下看 2,在 1 的基础上添加 js功能 va…

JQuery弹出菜单时禁止页面（body）滚动

最近在做手机端的弹出菜单,但是菜单弹出来后滑动手机屏幕的话页面滚动总是会将菜单滑上去,体验非常不好,所以查了一下弹出菜单时禁止页面滚动的方法,整理如下: 方法一:弹出菜单时给body和html添加一个css样式:height:100%;overflow:hidden;弹出层消失再去掉这个类.(只给body添加样式在安卓机上无效果) css代码:.add{height:100%;overflow:hidden;} JQuery代码:弹出菜单时给body添加类(.add) $('body,html'…

移动端vue页面禁止移动/滚动

当需要在移动端中禁止页面滚动,加入:@touchmove.prevent即可,例子如下 <template> <div @touchmove.prevent> <h3 class="main-bk">{{ title }}</h3> <p>您好!{{provider}}:</p> </div> </template> …

js开启和关闭页面滚动【亲测有效】

在移动端的页面开发过程中,经常会遇到点击弹框禁止页面滚动的情景,下面就来说下具体的做法... 第一步:构建一个函数 function bodyScroll(event){ event.preventDefault(); } 第二步:点击禁止页面滚动 $(".button").click(function(){ document.body.addEventListener('touchmove',bodyScroll,false); $('body').css({'position':'…

【VUE/JS】vue和js禁止浏览器页面后退

1.vue 禁止浏览器后退需求是:需要某个路由不能通过浏览器返回,同时不影响相互之间的切换整理一下解决方法和使用方法: 1.在路由配置中给这个路由添加meta信息,比如: { path: '/home', component: xxx, meta: {allowBack: false} } 2.在全局的router.beforeEach 函数里面获取allowBack的状态,同时更新vuex的allowBack的值,如: let allowBack = true // 给个默认值trueif…

js禁止微信浏览器下拉显示黑底查看网址，不影响内部Scroll

开发项目跑在微信浏览器经常会遇到一个问题,微信浏览器下拉的时候会出现自带的黑色底色(显示网址)如下图: 网上好多js禁止操作的做法禁止了内部Scroll,导致页面不能滚动,上拉加载失效,例如这种做法: $(‘body’).on(‘touchmove’, function (event) {event.preventDefault();}); or document.addEventListener('touchmove', function(e){e.preventDefault()}, fal…