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

obliviousSing 2016-04-06 05:22:00



<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可以触摸，但是不知道怎么实现，也不知道这种方法是否可行，求高手指教

...全文

6094 9 打赏收藏转发到动态举报

写回复

用AI写文章

9 条回复

切换为时间正序

请发表友善的回复…

发表回复

天际的海浪 2016-04-07

打赏
举报

那你看看是不是真的跨域了。因为浏览器是可以人为设置成允许跨域的

obliviousSing 2016-04-06

打赏
举报

引用 7 楼 jslang 的回复:

if(obj.scrollTop >= obj.scrollHeight-obj.offsetHeight)

多谢了，大哥，我想再请教个关于ajax的问题，就是为什么我手机和电脑调用的完全一模一样的ajax，但是手机可以用,电脑的报错，错误是跨域访问了，请问下为什么相同的ajax会出现跨域的问题的啊？

天际的海浪 2016-04-06

打赏
举报

if(obj.scrollTop >= obj.scrollHeight-obj.offsetHeight)

obliviousSing 2016-04-06

打赏
举报

引用 5 楼 jslang 的回复:

[quote=引用 4 楼 obliviousSing 的回复:] [quote=引用 3 楼 jslang 的回复:] 其实不用设置事件。直接 body { overflow: hidden; }

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

[/quote] 没问题啊


<!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>

[/quote] 真是麻烦你了哈，估计是我在手机上运行的，或者和我用的那个框架冲突了，改了半天还是不行，请问下，js怎么判断滚动条已经到底部了？还是准备用事件做，当滚动条到底部了就直接让页面事件不可用。。。。

天际的海浪 2016-04-06

打赏
举报

引用 4 楼 obliviousSing 的回复:

[quote=引用 3 楼 jslang 的回复:] 其实不用设置事件。直接 body { overflow: hidden; }

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

[/quote] 没问题啊


<!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>

obliviousSing 2016-04-06

打赏
举报

引用 3 楼 jslang 的回复:

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

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

天际的海浪 2016-04-06

打赏
举报

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

obliviousSing 2016-04-06

打赏
举报

引用 1 楼 jslang 的回复:


document.addEventListener("touchmove", function(e) {
  	e.preventDefault();
}, false);
document.getElementById('test').addEventListener('touchmove', function(e) {
  	e.stopPropagation();
}, false);

谢了，请问下，但是当div滑动到底部的时候，整个页面都滑动了，怎么弄啊。

天际的海浪 2016-04-06

打赏
举报


document.addEventListener("touchmove", function(e) {
  	e.preventDefault();
}, false);
document.getElementById('test').addEventListener('touchmove', function(e) {
  	e.stopPropagation();
}, false);