时间戳

首页 > 解决方案 > 如何防止图像在移动应用中滚动时移动

javascript - 如何防止图像在移动应用中滚动时移动

问题描述

我正在开发一个移动应用程序。我使用 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")>

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

<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 层给出了这个意想不到的结果。那么，我应该怎么做/写？

标签： javascriptjquerycssjquery-mobile

解决方案

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

当我从一个页面滑动到另一个页面时，问题仍然存在。在另一篇文章中，我发现这个解决方案听起来很有希望。我不能直接与用户交谈或发表评论，因为我离我还有 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;            
});

推荐阅读