请问下,js怎么让当前窗口不可滑动，但是窗口里面的div可以滑动啊

Web 开发 > JavaScript
收藏 回复
[问题点数：40分，结帖人obliviousSing]
更多帖子
私信 空间 博客
obliviousSing
等级
本版专家分：119
结帖率 100% 


<html>

     <body>

              <div id="test" style="overflow:auto">

                111111111111111111111111111111111111111111111

              </div>

      </body>

</html>


假设当前页面很长,已经出现滚动条了，但是我想让整个窗口是不可滑动的，但是里面的div因为有overflow:outo，所以我想让里面的div可以滚动，请问下该怎么做啊，我现在这么做的，但是感觉不对


  document.addEventListener("touchmove",function(e){

	e.preventDefault();

	e.stopPropagation();

	document.getElementById('test').addEventListener('touchmove',function(e){

	

	},false)

 },false);

现在就是禁止整个页面的触摸事件，但是让id 为test的div可以触摸，但是不知道怎么实现，也不知道这种方法是否可行，求高手指教
只看楼主 引用 举报 楼主 收起
展开阅读全文
更多帖子
私信 空间 博客
天际的海浪
等级
本版专家分：162020
勋章
Blank
签到王者 累计签到获取，不积跬步，无以至千里，继续坚持！
Blank
GitHub 绑定GitHub第三方账户获取
Blank
进士 2019年总版新获得的技术专家分排名前十
2018年总版新获得的技术专家分排名前十
2017年 总版技术专家分年内排行榜第七
Blank
银牌 2019年1月 总版技术专家分月排行榜第二 


document.addEventListener("touchmove", function(e) {

  	e.preventDefault();

}, false);

document.getElementById('test').addEventListener('touchmove', function(e) {

  	e.stopPropagation();

}, false);
只看TA 引用 举报 #1得分 40
更多帖子
私信 空间 博客
obliviousSing
等级
本版专家分：119
引用 1 楼 jslang 的回复:


document.addEventListener("touchmove", function(e) {

  	e.preventDefault();

}, false);

document.getElementById('test').addEventListener('touchmove', function(e) {

  	e.stopPropagation();

}, false);

谢了，请问下，但是当div滑动到底部的时候，整个页面都滑动了，怎么弄啊。
只看TA 引用 举报 #2得分 0
更多帖子
私信 空间 博客
天际的海浪
等级
本版专家分：162020
勋章
Blank
签到王者 累计签到获取，不积跬步，无以至千里，继续坚持！
Blank
GitHub 绑定GitHub第三方账户获取
Blank
进士 2019年总版新获得的技术专家分排名前十
2018年总版新获得的技术专家分排名前十
2017年 总版技术专家分年内排行榜第七
Blank
银牌 2019年1月 总版技术专家分月排行榜第二
其实不用设置事件。
直接
body {
overflow: hidden;
}
只看TA 引用 举报 #3得分 0
更多帖子
私信 空间 博客
obliviousSing
等级
本版专家分：119
引用 3 楼 jslang 的回复:
其实不用设置事件。
直接
body {
overflow: hidden;
}


这样确实简单了，还是有个问题。。。那就是div到底部就没法向上滑动了。。。
只看TA 引用 举报 #4得分 0
更多帖子
私信 空间 博客
天际的海浪
等级
本版专家分：162020
勋章
Blank
签到王者 累计签到获取，不积跬步，无以至千里，继续坚持！
Blank
GitHub 绑定GitHub第三方账户获取
Blank
进士 2019年总版新获得的技术专家分排名前十
2018年总版新获得的技术专家分排名前十
2017年 总版技术专家分年内排行榜第七
Blank
银牌 2019年1月 总版技术专家分月排行榜第二
引用 4 楼 obliviousSing 的回复:
Quote: 引用 3 楼 jslang 的回复:

其实不用设置事件。
直接
body {
overflow: hidden;
}


这样确实简单了，还是有个问题。。。那就是div到底部就没法向上滑动了。。。

没问题啊


<!doctype html>

<html lang="en">

<head>

	<meta charset="UTF-8" />

	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

	<title> 页面名称 </title>

	<meta name="viewport" content="width=400">

<style type="text/css">

body {

	overflow: hidden;

}



#div {

	overflow: auto;

	background: #FFFF00;

	height: 200px;



}

</style>

</head>

<body>



<p>01</p>

<p>02</p>

<p>03</p>

<p>04</p>

<div id="div">

	<p>---------01</p>

	<p>---------02</p>

	<p>---------03</p>

	<p>---------04</p>

	<p>---------05</p>

	<p>---------06</p>

	<p>---------07</p>

	<p>---------08</p>

	<p>---------09</p>

	<p>---------10</p>

	<p>---------11</p>

	<p>---------12</p>

	<p>---------13</p>

	<p>---------14</p>

	<p>---------15</p>

	<p>---------16</p>

	<p>---------17</p>

	<p>---------18</p>

	<p>---------19</p>

	<p>---------20</p>

</div>

<p>05</p>

<p>06</p>

<p>07</p>

<p>08</p>

<p>09</p>

<p>10</p>

<p>11</p>

<p>12</p>

<p>13</p>

<p>14</p>

<p>15</p>

<p>16</p>

<p>17</p>

<p>18</p>

<p>19</p>

<p>20</p>

<p>21</p>

<p>22</p>

<p>23</p>

<p>24</p>

<p>25</p>

<p>26</p>

<p>27</p>

<p>28</p>

<p>29</p>

<p>30</p>



</body>

</html>
只看TA 引用 举报 #5得分 0
更多帖子
私信 空间 博客
obliviousSing
等级
本版专家分：119
引用 5 楼 jslang 的回复:
Quote: 引用 4 楼 obliviousSing 的回复:

Quote: 引用 3 楼 jslang 的回复:

其实不用设置事件。
直接
body {
overflow: hidden;
}


这样确实简单了，还是有个问题。。。那就是div到底部就没法向上滑动了。。。

没问题啊


<!doctype html>

<html lang="en">

<head>

	<meta charset="UTF-8" />

	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

	<title> 页面名称 </title>

	<meta name="viewport" content="width=400">

<style type="text/css">

body {

	overflow: hidden;

}



#div {

	overflow: auto;

	background: #FFFF00;

	height: 200px;



}

</style>

</head>

<body>



<p>01</p>

<p>02</p>

<p>03</p>

<p>04</p>

<div id="div">

	<p>---------01</p>

	<p>---------02</p>

	<p>---------03</p>

	<p>---------04</p>

	<p>---------05</p>

	<p>---------06</p>

	<p>---------07</p>

	<p>---------08</p>

	<p>---------09</p>

	<p>---------10</p>

	<p>---------11</p>

	<p>---------12</p>

	<p>---------13</p>

	<p>---------14</p>

	<p>---------15</p>

	<p>---------16</p>

	<p>---------17</p>

	<p>---------18</p>

	<p>---------19</p>

	<p>---------20</p>

</div>

<p>05</p>

<p>06</p>

<p>07</p>

<p>08</p>

<p>09</p>

<p>10</p>

<p>11</p>

<p>12</p>

<p>13</p>

<p>14</p>

<p>15</p>

<p>16</p>

<p>17</p>

<p>18</p>

<p>19</p>

<p>20</p>

<p>21</p>

<p>22</p>

<p>23</p>

<p>24</p>

<p>25</p>

<p>26</p>

<p>27</p>

<p>28</p>

<p>29</p>

<p>30</p>



</body>

</html>

真是麻烦你了哈，估计是我在手机上运行的，或者和我用的那个框架冲突了，改了半天还是不行，请问下，js怎么判断滚动条已经到底部了？还是准备用事件做，当滚动条到底部了就直接让页面事件不可用。。。。
只看TA 引用 举报 #6得分 0
更多帖子
私信 空间 博客
天际的海浪
等级
本版专家分：162020
勋章
Blank
签到王者 累计签到获取，不积跬步，无以至千里，继续坚持！
Blank
GitHub 绑定GitHub第三方账户获取
Blank
进士 2019年总版新获得的技术专家分排名前十
2018年总版新获得的技术专家分排名前十
2017年 总版技术专家分年内排行榜第七
Blank
银牌 2019年1月 总版技术专家分月排行榜第二
if(obj.scrollTop >= obj.scrollHeight-obj.offsetHeight)
只看TA 引用 举报 #7得分 0
更多帖子
私信 空间 博客
obliviousSing
等级
本版专家分：119
引用 7 楼 jslang 的回复:
if(obj.scrollTop >= obj.scrollHeight-obj.offsetHeight)


多谢了，大哥，我想再请教个关于ajax的问题，就是为什么我手机和电脑调用的完全一模一样的ajax，但是手机可以用,电脑的报错，错误是跨域访问了，请问下为什么相同的ajax会出现跨域的问题的啊？
只看TA 引用 举报 #8得分 0
更多帖子
私信 空间 博客
天际的海浪
等级
本版专家分：162020
勋章
Blank
签到王者 累计签到获取，不积跬步，无以至千里，继续坚持！
Blank
GitHub 绑定GitHub第三方账户获取
Blank
进士 2019年总版新获得的技术专家分排名前十
2018年总版新获得的技术专家分排名前十
2017年 总版技术专家分年内排行榜第七
Blank
银牌 2019年1月 总版技术专家分月排行榜第二
那你看看是不是真的跨域了。因为浏览器是可以人为设置成允许跨域的
只看TA 引用 举报 #9得分 0
收起
收藏 回复
obliviousSing

等级：

关注 私信 TA的帖子
请问下,js怎么让当前窗口不可滑动，但是窗口里面的div可以滑动啊

用JS做一个滑动窗口的特效

里面还有一个更大的div，必须超出蓝色背景的父div，否则js中的scrollLeft是不能用的，将一直为0。 比较大的第二层div又包含着两个小的div,这两个div一样，只是id值不同。包含着四张图片。而且最外边的div宽度要正正...

js 实现div里面的内容滚动，并可以通过按钮控制

按照步骤来：   一 css 样式控制： .in_f { CLEAR: both; HEIGHT: 46px } .in_f .a { BACKGROUND: url(../images/i12.gif) no-repeat left 50%; FLOAT: left; WIDTH: 160px;... FLOAT: lef...

固定div位置，不随滚动条上下动

更多2019年的技术文章，欢迎关注我的微信公众号：码不停蹄的小鼠松（微信号：busy_squirrel），也可扫下方二维码关注获取最新文章哦~ 1、position ...若要使得div相对于浏览器窗口固定，即不随...

html可以移动的浮动窗口

(2)滚动网页的竖直滚动条时,该窗口的位置固定不变; (3)无论怎么移动,该窗口不会跑到网页可视范围之外   关键code: // 拖拽效果 function drag(){ var tags = arguments; // aler...

解决移动端弹框后底部页面可滑动问题，解决手机端弹框后底部页面滑动问题？？？

1.弹框都知道咋弄，无非就是一个div，然后css为position:fixed,宽高都为100%，然后通过一个灰色的透明背景来实现蒙层的效果：background-color:rgba(0,0,0,0.6); 2.在这个蒙层里边再写一个div...这里就不多介...

原生JS实现可横向拖拽div方法

function dragDiv(doucument,className){ var theobject = null; //声明，初始化一个操作对象 function resizeObject() { this.el = null;... //一些常用值 元素相对于浏览器窗口的X轴位置 this.gr...

pytorch手动实现滑动窗口操作，论fold和unfold函数的使用

在卷积网络中，经常会需要用...

html滚动条使用，以及页面有多个div块，如何让body页面不使用滚动条，只在某个div内使用滚动条

滚动条基本知识： 建议比价华丽的页面使用overflow:scroll这个样式的滚动条，比较好看。 scrollbar属性、样式详解 1． overflow内容溢出时的设置（设定被设定对象是否显示滚动条） overflow-x水平方向内容溢出时的...

如何让DIV固定在页面的某个位置而不随着滚动条随意滚动

利用JavaScript脚本，从浏览器中获取各个关于位置的参数，然后将其计算后，定位在窗体的右下角。可以承认，这个方法确实是比较自然的想法，也是很常见的方法，但是这样的方法有以下几个缺点： 1、使用了大量的计算...

如何让DIV固定在页面的某个位置而不随着滚动条随意滚动 (转)

这里稍微总结一下，那就是利用JavaScript脚本，从浏览器中获取各个关于位置的参数，然后将其计算后，定位在窗体的右下角。可以承认，这个方法确实是比较自然的想法，也是很常见的方法，但是这样的方法有以下几个缺点...

移动端H5页面，上下滑动翻页

向下滑动进入前一页 ， 当前页（加CSS样式outDown）向下移动移出窗口 ，下一页（加CSS样式inDown）向下移动进入窗口 同时设置1秒以后（setTimeout(function(){......},1000);）才可（根据canT...

可左右滑动的柱状图（数据区域可平移，缩放，基于echarts）

柱状图是数据可视化需求中的一种常见图表形式，当数据量大的时候，我们还会期望柱状图可以左右滑动。这里可以通过配置echarts的柱状图和数据区域缩放组件dataZoom来完成我们的需求。下面是完成后的效果动态图(鼠标移...

js与jquery实现页面滑动效果

两个月前开始正式工作,之前对js只是听过,没有真正使用过,JQuery也只是听说过有这种东西（大学里太懒散了）。由于工作需要,公司安排笔者做一个前端web页面仿iphone滑动效果,经过1个多月的努力,笔者总算是小有所成吧。...

【CSS-04】移动端蒙层底部页面禁止滑动

蒙层居中，且底部页面不能再滑动。 蒙层 效果： 关键字：z-index, rgba 实现： body分为两个大的div区域，一个是底部展示的div(div-back),一个是弹出的蒙层div(div-pop)。在弹出的蒙层区域，中间部分是container...

div框中的内容左右滚动

第一次写 ，还请大家多多支持，以后会努力更新，更多更使用的 方法和大家一起分享

弹框后面的页面让他不能滚动弹窗内容能滚动

弹框后面的页面让他不能滚动弹窗内容能滚动 <!-- 弹框 --> <div class="popup" ref="popup" v-if="modalInfo"> <div class="popup_con"> <img @click="popdown()" src="../../assets/imgs/...

固定div位置，不随滚动条滚动

1、只能在初始页面的可视区域固定div 编写js代码： jQuery.fn.floatdiv=function(location){ //判断浏览器版本 var isIE6=false; var Sys = {}; var ua = navigator.userAgent.toLowerCase(...

移动端js弹出层滚动的时候 body层不可滚动的解决办法

下滑列表时底层body也跟着滚动，连查带想的折腾了两天才解决这个问题。下面主要分享一下解决办法以及关键代码。...”，然而在手机上并没有什么卵用二、结合弹出层加上“overflow-y：auto”依然不起作用三、加上touch

一个可以在浏览器上自由移动的div

可自由移动的自定义<div>

js实现在页面内可拖动div（悬浮按钮可拖动改变位置）

那么对于返回上一页时不那么友好，于是得在不是首页的地方加上返回首页的悬浮按钮，点击即可返回首页，但在有的页面上这个按钮有时会挡住关键的数据信息，于是想把这个按钮做成悬浮的可以拖动的按钮，以便于看到你想...

JS移动端触屏滑动事件（banner轮播）

移动端触屏滑动的效果其实就是图片轮播，在PC的页面上很好实现，绑定click和mouseover等事件来完成。但是在移动设备上，要实现这种轮播的效果，就需要用到核心的touch事件。处理touch事件能跟踪到屏幕滑动的每根手指...

【js】瀑布流、向下滑动、ajax先加载完图片再排列

这里暂且用 jquery.masonry.js 废话不多说、直接上源码 &lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta ...

移动端触摸划屏，实现内容滑动

swipe.js是一个比较有名的触摸滑动插件，它能够处理内容滑动，支持自定义选项，你可以让它自动滚动，控制滚动间隔，返回回调函数等。经常可见使用在移动前端开发中。 使用方法 下面是一个比较简单的使用例子，添加...

自定义(滑动条)input[type="range"]样式

刚接触JavaScript没多久，如果文中有错误的地方欢迎大家指正，或者给予建议，让我能逐渐向大牛靠拢。今天这篇文章给大家带来的是关于美化Slider Bar的相关内容。Range是HTML5中新出现的滑块控件，也是常见的控件的之...

javascript--鼠标拖拽窗口案例（鼠标按下，在鼠标移动过程中，盒子跟着一起移动，鼠标松开，盒子停止移动）...

界面如图所示： ...1.页面结构分析：一个大盒子d-box来确定位置，里面放一个小盒子drop（存放“注册信息（可以拖拽”文字和span标签，span存放“关闭”，id为box_close），鼠标在drop中按下，移动时候d-bo...

WEB页面中嵌套的滚动窗口

在同事的帮助下，我们确定了一个“虚拟窗口”的方案，就是设计一个滚动窗口，但是内容空白，只有窗口height是根据实际数据条目设置，然后在它的scroll事件中，计算需要显示哪部分数据，再单独用一个DIV来显示这部分...

移动端安卓和IOS开发框架Framework7教程-滑动操作列表（可滑动列表）

滑动操作列表是列表的扩展，它提供滑动操作的功能，滑动列表元素可以展现隐藏的功能菜单，就像滑动删除一样。 让我们来看一下滑动列表元素的布局结构： &lt;div class="list-block"&gt; ...

移动端页面滑动事件穿透问题及其解决方案

在一个可滚动的列表页中打开弹窗，底部的页面理论上是不可滚动的，但是当滑动弹窗时，底部页面会跟随滚动，这就是所谓的页面滚动穿透的问题。 解决方案一： 当弹窗显示时，在父元素上添加fix类来禁用滚动；当弹窗...

3.10 Web自动化 ---- js修改元素属性、页面滑动

空间有设置限制输入，那么就不能sendKey操作了，需要先js修改元素value属性 如：https://www.12306.cn/index/网站日期输入框 1. Window窗口Console控制台修改readOnly属性 仅对本次生效,页面刷新之后，日期...

相关热词 c#中字符串大小写转化 c# 设置加载ie11 c#捕获关机信号 c#显示键盘输入的字符 c#list对象排序 c# sql查询方法 3d贝塞尔曲线 c# c#获取秒 c# 类型可空转换 c#字符串转ascii码