Question

我有一些嵌套的div提供菜单栏和“draggable”点，如下所示......

    <div id="content">
        <div id="headermenu" class="headerfixed"></div>
        <div id="articles" class="articlediv"></div>
        <div id="adverts" class="advertfooter"></div>
        <div id="footermenu" class="footerfixed" >
            <div id="footerpreview" class="slideselect">SCALED INNER HTML</div>
            <div id="footerbutton" class="slidebutton"></div>
        </div>
    </div>

相关元素的CSS是：

    div.slidebutton
    {position:absolute;
    background: url("images/hhgfooterbubble1.png") no-repeat;
    left:45px;
    bottom:8px;
    width:39px;
    height:39px;
    z-index:4;}

    div.footerfixed 
    {position:fixed; background: url("images/hhgfooterbar1.jpg") no-repeat; bottom:0px; left:0px; width:769px;height:49px; visibility: hidden; overflow-x:hidden; z-index:3;}

我正在使用vmousemove尝试移动footerbutton但是当我触摸并拖动时 - 整个页面（在iPad上）左右拖动显示黑色空间，按钮只移动一点。

$('#footermenu').bind('vmousemove', function (event)
    {
        y = event.pageY - window.pageYOffset;
        x = event.pageX;
        l = parseInt(footerbuttondiv.style.left);
        r = l + 39;
        c = 0;

        if (y >= 954)
        {
            if (x>=l && x<=r)
            {
                // alert (y + "," + x + "," + l + "," + r);
                c = x - 19;
                footerpreviewdiv.style.visibility = 'visible';
                footerbuttondiv.style.left = c + "px";
            }
        }
    });

有没有办法让容器div footermenu忽略拖动，只有footerbutton会受到影响。感激地收到任何和所有的帮助。

一切正常，在Firefox / Firebug中没有错误。

Answer 1

问题出在“内容”和“文章”div的CSS类中。

为了使iPad显示器保持刚性并且不会因侧向手指手势而移动，这些DIV元素的CSS必须包含overflow-x：hidden;元件。

在检查我的页脚栏可见时显示的每个元素的自己的CSS时，我发现了“文章”DIV的CSS有错误。

我更改了DIV以包含overflow-x设置，并且已经删除了侧滚动行为。

使用jQuery移动div会在iPad中移动整个页面

1 个答案: