Question

我正在使用一个需要阻止滚动的插件。

在桌面上，这很简单：

$( document ).css({
    overflow: 'hidden'
});

但是在移动设备上它不起作用，因为它只会隐藏滚动条而且不会阻止滚动，所以这很难!!!

我需要文档不滚动（即使在移动设备上），但我需要DIV中的内容滚动。

DEMO：http://dcdev.altervista.org/test/test.html

在桌面上它运行正常，但在移动设备上它会阻止在文档中的任何地方滚动！

我试过这种方式：

<style>
.box {
    position: fixed;
    top: 3em;
    right: 3em;
    left: 3em;
    bottom: 3em;
    border: 3px solid green;
    background-color: red;
    color: white;
    overflow: hidden;
}

.text {
    position: absolute;
    bottom: 0;
    right: 0;
    left; 0;
    height: 150px;
    width: 100%;
    overflow: auto;
}
</style>


<body>
    <div class="box">
        <div class="text">A VERY LONG TEXT</div>
    </div>

<script>
    var touch = function( event ) {
        event.preventDefault();
        event.stopPropagation();
    },
        $this = $( '.box' ),
        textBox = $this.children( ':first-child' );

    $( document ).not( textBox ).bind( 'touchmove', touch )

    $( 'body' ).css( 'overflow', 'hidden' );
</script>
</body>

我该怎么做？

Answer 1

您可以通过设置position : fixed将其锁定到位，并通过计算top来计算它已滚动的距离。这样，它不会移动。请确保.box有position:relative，因此.text的排名相对于.box。

jQuery Touch Events将一切都绑定在自己身上

1 个答案: