如何防止图像在移动应用程序中滚动时移动

Question

我正在开发一个移动应用程序。我使用 JavaScript 作为代码和一些 jQuery mobile (1.4.5)。 我的问题是，当我滚动时，我的图像会跟随滚动。我在网页版中没有这个问题，但在我的手机上，图像没有修复。当我在任何设备上滚动时，我希望将我的图像固定在我想要的特定位置。 让我简单解释一下我的代码：

• 当我打开我的应用程序时，一些图像出现在它们的位置。为此，我只是使用：

<img src="js/image.jpg" style="position: absolute; top:105px; left:10px;" width="110" height="85">

效果很好，即使在移动应用中，此图像也会保持原位。

• 然后，其他图片必须出现。为此，我使用了这个函数：

function im2(a,b,c,d){var x = document.createElement("IMG");
 x.setAttribute("src", a);
x.setAttribute("style",b);
 x.setAttribute("width", c);x.setAttribute("height",d );
document.body.appendChild(x);
}

然后调用图像：

<im2("js/image2.jpg","position: fixed; top:210px ; left:165px","280","35")>

然后当我滚动时，此图像在移动设备上不再固定（在网络上工作正常）... :-(

• 所以，我尝试了这个 CSS 来粘贴图像，以禁止它移动

<style>
img.sticky {
  position: -webkit-sticky;
  position: sticky;
}
</style>

在 Javascript 中，我使用相同的函数 im2 ：im2(w, etc){ x.setAttribute("class", w); etc}

然后，我这样调用函数：

im2("sticky","js/image2.jpg","position: fixed; top:210px ; left:165px","280","35") 和 .... 没有任何问题。

我认为这是因为 jqm 层给出了这个意想不到的结果。 那么，我该怎么办/写呢？

Answer 1

由于一些未知的原因，它可以工作......图像保持固定......现在？？

当我从一个页面滑动到另一个页面时，问题仍然存在。在另一篇文章中，我发现这个解决方案听起来很有希望。因为距离我还有 2 小时的路程，所以我无法直接与用户交谈或发表评论。这是应该工作的jQuery代码，但它不适用于我。 我应该把这条线放在哪里？

$('img').on('dragstart', function(event) { event.preventDefault(); });

这是我使用的滑动脚本：

<script>
$(document).on('swipeleft', '.ui-page', function(event){    
    if(event.handled !== true) // This will prevent event triggering more then once
    {    
        var nextpage = $.mobile.activePage.next('[data-role="page"]');
        // swipe using id of next page if exists
        if (nextpage.length > 0) { 
            $.mobile.changePage(nextpage, {transition: "slide", reverse: false}, true, true);
        }
        event.handled = true;
    }
    return false;         
});

$(document).on('swiperight', '.ui-page', function(event){     
    if(event.handled !== true) // This will prevent event triggering more then once
    {      
        var prevpage = $(this).prev('[data-role="page"]');
        if (prevpage.length > 0) {
            $.mobile.changePage(prevpage, {transition: "slide", reverse: true}, true, true);
        }
        event.handled = true;
    }
    return false;            
});