相关疑难解决方法(0)

我一直在寻找一个"灯箱"类型的解决方案,允许这个但尚未找到一个(请,如果您知道任何,请建议).

我正在尝试重新创建的行为就像您在点击图片时在Pinterest上看到的那样.叠加层是可滚动的(因为整个叠加层像页面顶部的页面一样向上移动),但叠加层后面的主体是固定的.

我试图用CSS创建它(即div在整个页面和主体上面叠加overflow: hidden),但它不会阻止div可滚动.

如何防止正文/页面滚动但仍在全屏容器内滚动？

使用jQuery,我想禁用正文的滚动:

我的想法是:

1. 组 body{ overflow: hidden;}
2. 捕获当前 scrollTop();/scrollLeft()
3. 绑定到body scroll事件,将scrollTop/scrollLeft设置为捕获的值.

有没有更好的办法？

更新:

请参阅http://jsbin.com/ikuma4/2/edit,查看我的示例,以及原因

我知道有人会想"为什么他不只是position: fixed在面板上使用？".

由于我有其他原因,请不要这样做.

到目前为止,我只是一名iPhone开发人员,现在我决定给Android一个旋转.我在Android上无法弄清楚的是如何以编程方式阻止滚动WebView？

类似于iPhone预防onTouchMove活动的东西会很棒!

有没有办法在iPhone网络应用程序中完全禁用网页滚动？我在谷歌上试过很多东西,但似乎都没有用.

这是我当前的标题设置:

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

document.body.addEventListener('touchmove', function(e){ e.preventDefault(); });

似乎不起作用.

这个:

$('body').on('touchmove', function(e) { e.preventDefault(); });

可以工作,但会禁用整个页面的滚动,这远非理想.

这个:

$('*').on('touchstart', function(e){
    var element = $(this).get(0);

    if ( element.scrollTop <= 0 )                                           element.scrollTop = 1;
    if ( element.scrollTop + element.offsetHeight >= element.scrollHeight ) element.scrollTop = element.scrollHeight - element.offsetHeight - 1;
});

适用于具有滚动区域的页面.然而,当没有任何东西要滚动时,它将再次显示橡皮筋.

所以我的问题:

如何禁用橡皮筋效果并保持-webkit-overflow-scrolling区域可滚动？

[更新]

最佳方案

禁用所有不可滚动元素(如选项卡栏或导航栏)上的滚动.

anElement.addEventListener('touchmove', function( event ){ event.preventDefault() };

将滚动处理程序附加到可滚动元素(例如主要内容).

anElement.addEventListener('touchstart', function( event ){
        if( this.scrollTop === 0 ) {
            this.scrollTop += 1;
        } else if( this.scrollTop + this.offsetHeight >= this.scrollHeight ) {
            this.scrollTop -= 1; …

我正在尝试为移动Safari配置视口.使用视口元标记,我试图确保没有缩放,并且您不能水平滚动视图.这是我正在使用的元标记:

<meta id="viewport" name="viewport" content ="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />

在我加载页面的iPhone上,看起来似乎没问题:

但我可以横向滚动,所以它看起来像这样(这是我可以去的最右边:

当我将其摆放到横向视图中时,页面会按预期呈现,锁定水平滚动位置.

我正在试图弄清楚如何使这个页面根本不能水平滚动.是否有可能我有一些页面元素推出内容？我甚至不希望有一个正确的视口集可能,但我在这里抓住吸管.

当发生某个事件时,我只需要阻止使用JS和/或JQuery在移动设备上滚动.我有一个数字,当用户打开图形时,滚动将被禁用,一旦关闭,滚动将再次启用.目标设备是:

• 任何从4s到最新的iPhone(包括5 + 6)

以下是我尝试过但没有解决的一些问题:

方法1:

                    document.addEventListener('touchstart', this.touchstart);
                    document.addEventListener('touchmove', this.touchmove);

                    function touchstart(e) {
                        e.preventDefault()
                    }

                    function touchmove(e) {
                        e.preventDefault()
                    }

方法2:

// left: 37, up: 38, right: 39, down: 40,
// spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36
var keys = {37: 1, 38: 1, 39: 1, 40: 1};

function preventDefault(e) {
  e = e || window.event;
  if (e.preventDefault)
      e.preventDefault();
  e.returnValue = false;  
}

function preventDefaultForScrollKeys(e) {
    if (keys[e.keyCode]) {
        preventDefault(e);
        return false;
    }
}

function disableScroll() …