html手机页面 限制滑动区域（在滑动一个div区域时不会带动整个页面的滑动，详情见补充）

Posted 2023-03-12

我要做一个手机页面，在一个div显示查询到的东西
设置了div的高度和宽度，加了overflow属性，当数据太多，默认高度显示不下时加滚动条。
现在的问题是。手机页面中，当我在div中滑动的时候，的确是div中的滚动，
但是当我滑到底时，由于数据到底了，就变成页面的滑到去了。
怎么限制用户在div滑到时只是div的滚动呢，到底了就不动了。求大神帮，会一直等的。谢谢。

我想我的理解是不是正确的；
你的页面的高度是不是大于一屏？ 如果是大于一屏，肯定会出现你所说的效果的；
但你想即使div的内容滑到底了，也不希望整个页面滑动，是不是这个意思？
我想可以为这个div绑定个事件，如果div内容滑到底了，并且点击点在这个div内，就取消在这个div内的点击或滑动的动作，这样，当还继续在div内滑动时，就不会动了。追问

恩，你理解了我说的，不过这样问题就是，滑动一次就没了，这显然不合理的。
我想要的是在此DIV滑动就滚动DIV，在div外滚动就滚动整个页面
可能我的理解和要求本身就是错误的，新人也不咋懂
不过还是谢谢帮助

参考技术A

　　你好，可以在html head中添加

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
   <meta name="apple-mobile-web-app-capable" content="yes" />

　　viewport可以控制用户在手机上两个手指缩放的行为范围，这行代码的意思是宽度为设备宽度，初始缩放为1，最大缩放也是1倍，用户不能缩放。

　　apple这行是告诉ios这是个应用，就不会像网页一样可以滚动到顶部回弹一下的效果，就是可以看到苹果默认背景灰色部分的那个效果。如果你不需要可以删掉这行。

　　希望可以解决你的问题

追问

是我描述得不够清楚吗？
不能缩放和我所说的滑到好像没关系吧。就是上下滑动这个东西。
还有那个弹一下的效果，和我说的更没关系了

追答

这个就是解决页面滚动出手机的可视范围的，你试一下就知道了

参考技术B 如果整个页面的高度大于屏幕高度肯定是会这样的,除非你body设置overflow:hidden或者position:fixed