<object> PDF не прокручивается на мобильных устройствах

У меня есть место тега object в html, как это:

<div class="viewport" id="pdf-viewport">
   <object class="pdf-object" data="PDF_URL_HERE" type="application/pdf"></object>
</div>

На моем рабочем столе все нормально работает, но я не могу прокручивать PDF на своем мобильном устройстве. Как добавить эту функциональность? Я пробовал с CSS и переполнениями, но я думаю, что я что-то упустил.

EDIT Я попытался внедрить PDF файл в iFrame с помощью GoogleDocs/GoogleDrive, но это дает мне Preview not available слишком много раз, поэтому он не является надежным.

Ответ 1

попробуй это:

Это то, что я сделал, чтобы прокрутить iframe для работы на iPad. Обратите внимание, что это решение работает только в том случае, если вы управляете html, отображаемым внутри iframe.

Фактически он отключает iframe scrolling по умолчанию и вместо этого вызывает iframe scrolling тега body внутри iframe.

index.jsp

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#container {
    position: absolute;
    top: 50px;
    left: 50px;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

</style>
</head>
<body>

    <div id="container">
        <iframe src="test.jsp" id="iframe" scrolling="no"></iframe>
    </div>

</body>
</html>

test.jsp

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style type="text/css">
html { 
    overflow: auto; 
    -webkit-overflow-scrolling: touch; 
}
body {
    height: 100%;
    overflow: auto; 
    -webkit-overflow-scrolling: touch;
    margin: 0;
    padding: 8px;
}
</style>
</head>
<body>
<!-- pdf present this location local storage.-->
<iframe height="100%" id="iframe" scrolling="no" width="100%" id="iframe" src="data/richh.pdf" />
<script>
$("#iframe").contents().find("body").css({
    "height": "100%",
    "overflow": "auto", 
    "-webkit-overflow-scrolling": "touch"
});
</script>
</body>
</html>

также посетите ссылку:

https://wordpress.org/support/topic/pdf-not-showing-not-scrolling-on-mobile/

Ответ 2

<iframe> не лучший способ отображения PDF (не забывайте о совместимости с мобильными браузерами, например Safari). Некоторые браузеры всегда будут открывать этот файл во внешнем приложении (или в другом окне браузера). Лучший и самый совместимый способ, который я нашел, немного сложнее, но работает на всех браузерах, которые я пробовал (даже очень устарел):

Храните <iframe> но не показывайте PDF внутри него, он будет заполнен HTML-страницей, состоящей из <object>. Создайте страницу HTML-упаковки для своего PDF файла, она должна выглядеть так:

<html>
<body>
    <object data="your_url_to_pdf" type="application/pdf">
        <embed src="your_url_to_pdf" type="application/pdf" />
    </object>
</body>
</html>

Ответ 3

Иногда рендеринг на мобильных устройствах делает некоторые элементы "выборочными" и не применяет прокрутку, когда вы касаетесь его.

Вы можете попробовать прокрутить прокрутку, установив для него переполнение с помощью css, если оно не работает, вы можете попробовать добавить наложение, создавая div с прозрачным фоном, полной шириной и высотой

<!-- HTML -->
<div class="overlay">
</div>

//CSS
.overlay{
  width: 100%;
  /* transparent background is set by default so no need to declare it supposedly */
}

Затем, полная высота, Понимая полную высоту как полную высоту документа, вы можете использовать:

// jQuery (you can even use javascript etc)
$(document).ready(function(){
   var height = $(document).height();
   $('.overlay').height(height);
   // or $('.overlay').css('height', height);
});

чтобы получить его. то вы должны иметь возможность прокручивать их правильно. Я прочитал много вопросов о том, что в последние недели не было прокрутки на мобильных устройствах, и я действительно не знаю, какой момент это на 100% еще вернее.

Надеюсь, это поможет вам.