禁止屏幕滚动

最新推荐文章于 2024-05-30 11:27:58 发布
最新推荐文章于 2024-05-30 11:27:58 发布
阅读量103 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/theWayToAce/p/7079201.html
版权 
<!DOCTYPE> 
<html> 
<head> 
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  <meta name = "viewport" content = "width = device-width, initial-scale = 1.0, maximum-scale = 1.0, user-scalable = 0" />
  <style>
    *{
      margin: 0;
      padding:0;
  }
  button{
      margin: 10px;
  }
  .test{
      position: relative;
      width: 300px;
      height: 1000px;
      background: #ccc;
  }
  .test .head,
  .test .center,
  .test .foot{
      position: absolute;
      left:0;
  }
  .test .head{
      top:0;
  }
  .test .center{
      top: 500px;
  }
  .test .foot{
      bottom: 0;
  }
</style>
</head> 
<body> 
  <button type="button" id="no_scroll">点我屏幕不能滚动</button>
  <button type="button" id="scroll">点我屏幕允许滚动</button>
  <div class="test">
    <p class="head">这里是头部</p>
    <p class="center">这里是中部</p>
    <p class="foot">这里是底部</p>
</div>
<script type="text/javascript">
    var handler = function () {
        event.preventDefault();
        event.stopPropagation();
    }; 
    document.getElementById("no_scroll").addEventListener('click',function(){
        document.body.style.cssText="overflow:hidden";
        document.body.addEventListener('touchmove',handler,false);
        document.body.addEventListener('wheel',handler,false);
    });
    document.getElementById("scroll").addEventListener('click',function(){
        document.body.style.cssText="overflow:auto";
        document.body.removeEventListener('touchmove',handler,false);
        document.body.removeEventListener('wheel',handler,false);
    });
</script>
</body> 
</html>

 

转载于:https://www.cnblogs.com/theWayToAce/p/7079201.html

weixin_30851409
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在vue中实现禁止屏幕滚动,禁止屏幕滑动
12-28
今天写了一个Vue弹层组件，用来全屏查看图片的，大概是下面这么一个效果： 其中背景是透明色的，但是弹出这个组件时手指滑动、鼠标滚轮滑动，底部页面是会动。 作为自己开发的一个常用的组件，这种bug当然是要解决的。 于是学艺不精的我在网上找了蛮久的，看了不少博客，看了不少观点和方法。终于找到了一个最简单、最实在的方法， 代码如下： ... 首先，这个div就是整个遮罩组件的根组件，核心就是d
阻止屏幕滚动
小虾的博客
11-19 209
mousewheel window.addEventListener('mousewheel', (e) => { e.preventDefault() }, {passive: false}) 参考MDN：https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/addEventListener
前端-js-禁止屏幕滚动
qq_23019107的博客
01-24 931
const PASSIVE = function (e) { e.preventDefault(); } //禁止屏幕滚动 document.body.style.overflow = 'hidden'; document.addEventListener('touchmove', PASSIVE, { passive: false, }); //允许屏幕滚动 document.body.style.overflow = 'auto'; document.removeEv...
移动端开发，禁止屏幕的滚动
xkqbaiyuan的博客
12-05 410
手机端出现弹框后，禁止页面的滚动。 移动端使用e.preventDefault()禁止滚动及取消,兼容苹果 原文链接 //实现滚动条无法滚动 var mo=function(e){e.preventDefault();}; /***禁止滑动***/ function stop(){ document.body.style.overflow='hidden'; ...
移动端屏幕禁止滑动
weixin_30843605的博客
01-29 530
最近做移动端，弹出框加遮罩层后禁止滑动//实现滚动条无法滚动var mo=function(e){e.preventDefault();};/***禁止滑动***/function stop(){ document.body.style.overflow='hidden'; document.addEventListener("touchmove",mo...
uniapp禁止屏幕滚动
qq_36926045的博客
12-23 2991
//最外层view <view @touchmove.stop.prevent="() => {}" > </view>
弹框后禁止遮罩层后面页面滚动（兼容ios和android）.zip
08-20
layer弹框后滑动遮罩层部分会滚动后面的列表页，这是目前个人使用的最好的解决方案，兼容ios和android
jQuery弹出层后禁用底部滚动条(移动端关闭回到原位置)
10-21
主要介绍了jQuery弹出层后禁用底部滚动条(移动端关闭回到原位置)的关键代码，非常不错，代码简单易懂,需要的朋友可以参考下
toucher最新版 触屏浏览器
08-31
Toucher触摸屏浏览器软件界面美观大方，触摸查询导航方便，程序对外接口丰富，提供了在触摸屏一体机上...　· 自动返回首页，定时关机，周末不开机，自动改变屏幕分辨率，禁止图像工具栏，禁止屏幕保护，延时启动软件。
在vue中禁止屏幕滚动，禁止屏幕滑动
weixin_41033048的博客
10-09 914
有效：https://www.cnblogs.com/fanqiuzhuji/p/12667660.html
禁止背景屏幕滑动
t1120533254的博客
01-17 597
简单介绍一下使用背景，有相同情况的可用这个方法。 在Vue.js中， 主界面有多个地方点击添加故障，可滚动。 主界面子组建弹出来也可以滚动。   子组件子组建滚动，会带动主i界面滚动，导致返回后主界面不在原来的位置显示。 解决方案：先创建三个方法。在显示子组件的时候调用this.bodyFixed(); 子组件消失的时候调用this.bodyInitial(); bodyScroll...
移动端阻止屏幕滑动
kongjunchao159的博客
08-06 1275
移动端阻止屏幕滑动： var handle = function(event){     event.preventDefault(); } document.body.addEventListener('touchmove',handle,false); document.body.removeEventListener('touchmove',handle,false);
禁止遮罩层以下屏幕滑动
xidongdong1的博客
06-20 886
原文链接禁止遮罩层以下屏幕滑动
`“use strict“`在JavaScript中是什么？它背后的原理是什么？
Jerry学长
05-27 1046
JavaScript的严格模式（strict mode）是ECMAScript 5引入的一项特性。如果你在脚本或函数的顶部声明 ，你就启用了严格模式： 当JavaScript引擎看到这个指令时，它将开始以一种特殊的模式解释代码。在这种模式下，当检测到某些可能导致潜在错误的编码实践时，会抛出错误。这就是严格模式背后的基本原理。考虑下面这个例子： 开发者可能因为强迫症而对齐数值字面量，但这样会无意中使变量 初始化为八进制字面量。在非严格模式下，这将被解释为值 （十进制）。然而，在严格模式下，这样的代码会抛出错
【redis】Spring之RedisTemplate配置与使用
05-30 188
转载：Spring之RedisTemplate配置与使用用过redis，但直接使用Jedis进行相应的交互操作，现在正好来看一下RedisTemplate是怎么实现的，以及使用起来是否更加便利。
书籍学习|基于SprinBoot+vue的书籍学习平台(源码+数据库+文档)
JIngJaneIL的博客
05-28 1015
首先,论文一开始便是清楚的论述了平台的研究内容。其次,剖析平台需求分析,弄明白“做什么”,分析包括业务分析和业务流程的分析以及用例分析,更进一步明确平台的需求。然后在明白了平台的需求基础上需要进一步地设计平台,主要包罗软件架构模式、整体功能模块、数据库设计。本项目软件架构选择B/S模式和java技术，总体功能模块运用自顶向下的分层思想。再然后就是实现平台并进行代码编写实现功能。论文的最后章节总结一下自己完成本论文和开发本项目的心得和总结。通过书籍学习平台将会使书籍学习各个方面的工作效率带来实质性的提升。
Vue3实战笔记（52）—Vue 3封装持仓分析饼图
最新发布
山花的博客
05-30 125
接上文，封装持仓分析饼图。封装好几个组件，用于后续开发。把忧愁煮成茶，让它在心间慢慢沉淀，剩下的，便是清甜的回味。
Vue3 - 实现一个雨水滴落的动画效果
良月柒
05-29 131
在 Vue 3 中实现一个雨水滴落的动画效果，可以使用 HTML5 的元素和 JavaScript 来绘制和控制动画。
vue3+ts禁止屏幕滚动
03-22
可以通过以下代码实现： ```typescript import { onMounted, onBeforeUnmount } ...具体来说，当组件挂载时，会调用 `disableScroll` 函数来禁止屏幕滚动，当组件卸载时，会调用 `enableScroll` 函数来启用屏幕滚动。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值