当前位置: 首页 > 面试题库 >

如何防止文档滚动但允许iOS和Android网站上的div元素滚动?

澹台岳
2023-03-14
问题内容

我使用jQueryMobile为iOS和Android创建了一个网站。

我不希望文档本身滚动。相反,只有一个区域(一个<div>元素)应该是可滚动的(通过css属性overflow-y:scroll)。

所以我通过以下方式禁用了文档滚动:

$(document).bind("touchstart", function(e){
    e.preventDefault();
});

$(document).bind("touchmove", function(e){
    e.preventDefault();
});

但这也将禁用文档中所有其他元素的滚动,无论是否overflow:scroll设置。

我该如何解决?


问题答案:

终于,我开始工作了。真的很简单:

var $layer = $("#layer");
$layer.bind('touchstart', function (ev) {
    var $this = $(this);
    var layer = $layer.get(0);

    if ($this.scrollTop() === 0) $this.scrollTop(1);
    var scrollTop = layer.scrollTop;
    var scrollHeight = layer.scrollHeight;
    var offsetHeight = layer.offsetHeight;
    var contentHeight = scrollHeight - offsetHeight;
    if (contentHeight == scrollTop) $this.scrollTop(scrollTop-1);
});


 类似资料:
  • 问题内容: 我一直在寻找一种“灯箱”类型的解决方案,它允许这样做,但还没有找到(请提出建议,如果您知道的话)。 我尝试重新创建的行为就像单击图片时在Pinterest上看到的一样。叠加层是可滚动的( 因为整个叠加层像页面顶部的页面一样向上移动 ),但是叠加层 后面 的主体是固定的。 我试图仅使用CSS( _即使用覆盖整个页面和正文的覆盖层)_来创建它,但这并不能阻止其滚动。 如何防止正文/页面滚动

  • 问题内容: 我有一个模态框窗口(弹出窗口),其中包含一个iframe, 并且在该 iframe中 有一个可滚动的 div 。 当我滚动iframe的内部DIV,并且达到其上限或下限时, 浏览器本身的窗口就会开始滚动。这是 不想要的行为 。 我已经尝试过类似的操作, 当鼠标进入弹出框区域时,该操作会在onMouseEnter时终止主窗口滚动: e.preventDefault()由于某些原因无法正常

  • 问题内容: 我有一个滚动条,当我单击它时我想要一个链接,它将迫使其滚动以查看其中的元素。我这样写它的JavasSript: 但这会在滚动页面的同时滚动所有页面。如何解决? 我想这样说 问题答案: 您需要获取要滚动到视图中的元素相对于其父元素(滚动div容器)的顶部偏移量: 现在,将变量topPos设置为滚动div的顶部与希望显示的元素之间的距离(以像素为单位)。 现在,我们告诉div使用以下命令滚

  • 我有一个,其元素样式如下: 我需要允许滚动沿Y轴当它变得高于300px,这工作很好。但我需要将设置为滚动条本身。 我尝试使用这个元素样式: 当它隐藏滚动条时,它也不允许滚动。有没有一种方法可以在滚动条不可见的情况下滚动?

  • 问题内容: 我想创建一个可以滚动但不显示滚动条的div。我已经找到了Webkit的解决方案(如下),但是如何在其他浏览器中实现呢? 我宁愿避免使用javascript插件。希望找到CSS或特定于供应商的解决方案。 问题答案: 您必须将可滚动div包裹在另一个div中,以隐藏滚动条。 。 顺便说一句:一个漂亮的jQuery小插件jScrollPane使用了相同的技术

  • 问题内容: 我有一个聊天小部件,每次向上滚动时,它都会拉出一系列消息。我现在面临的问题是加载消息时滑块固定在顶部。我希望它专注于上一个数组中的最后一个索引元素。我发现可以通过传递索引来创建动态引用,但是我还需要知道使用哪种滚动功能来实现这一点 问题答案: 单击此处,获得有关StackBlits的完整演示 React 16.3 +,Class组件 类组件-Ref回调 不要使用字符串引用。 字符串引用