Прокрутка на IPAD

MyTetra Share

Делитесь знаниями!

Прокрутка на IPAD

Ссылка на оригинал

Время создания: 26.02.2019 22:39

Автор: alensav

Текстовые метки: iframe, scroliing, прокрутка

Раздел: MyTetra - INTERNET

Запись: xintrea/mytetra_db_alensav/master/base/1551209961vgxog1hwzd/text.html на raw.githubusercontent.com

-webkit-overflow-scrolling:touch, как упоминалось в ответе, является возможным решением.

</div>

Но если вы не можете прокручивать вверх и вниз внутри iframe, как показано на рисунке ниже,

вы можете попробовать прокручивать с двумя пальцами по диагонали, например,

Это действительно сработало в моем случае, поэтому просто поделитесь им, если вы еще не нашли решение для этого.

ответ дан Dipin Kumar 26 авг. '13 в 18:21

источник поделиться

Не отображается, что iframes отображается и правильно прокручивается. Вы можете использовать тег объекта для замены iframe, и содержимое будет прокручиваться двумя пальцами. Вот простой пример:

<html>

<head>

</head>

<body>

<div>HEADER - use 2 fingers to scroll contents:</div>

</div>

<div>FOOTER</div>

</body>

</html>

ответ дан deCastongrene 06 янв. '11 в 2:11

источник поделиться

Это не мой ответ, но я просто скопировал его из https://gist.github.com/anonymous/2388015 только потому, что ответ является устрашающим и полностью устраняет проблему. Кредит полностью переходит к анонимному автору.

$(function(){

if (/iPhone|iPod|iPad/.test(navigator.userAgent))

$('iframe').wrap(function(){

var $this = $(this);

return $('<div />').css({

width: $this.attr('width'),

height: $this.attr('height'),

overflow: 'auto',

'-webkit-overflow-scrolling': 'touch'

});

})

</script>

ответ дан Foreever 07 нояб. '14 в 13:33

источник поделиться

Как упоминалось в других сообщениях, сочетание значений css переполнения: auto; а также -webkit-overflow-scrolling: touch;

работает, когда применяется к BOTH iframe, о котором идет речь, и его родительский div

С неудачным побочным эффектом двойных полос прокрутки в браузерах без касания.

Решением, которое я использовал, было добавить эти значения css через javascript/jquery. Это позволило мне использовать базовый CSS для всех браузеров.

if (isSafariBrowser()){

$('#parentDivID').css('overflow', 'auto');

$('#parentDivID').css('-webkit-overflow-scrolling', 'touch');

$('#iframeID').css('overflow', 'auto');

$('#iframeID').css('-webkit-overflow-scrolling', 'touch');

}

где isSafariBrowser() определяется как foll...

var is_chrome = navigator.userAgent.indexOf('Chrome') > -1;

var is_safari = navigator.userAgent.indexOf("Safari") > -1;

function isSafariBrowser(){

if (is_safari){

if (is_chrome) // Chrome seems to have both Chrome and Safari userAgents

return false;

else

return true;

}

return false;

}

Это позволило моему приложению работать на iPad Заметка 1) Не тестировалось на других ios-системах 2) Не тестировалось в браузерах Android на планшетах, возможно, потребуется внести дополнительные изменения.

(поэтому это решение может быть не полным)

ответ дан Toothless Seer 27 февр. '13 в 8:03

источник поделиться

Код ниже работает для меня (спасибо Кристофер Циммерманн за его сообщение в блоге http://dev.magnolia-cms.com/blog/2012/05/strategies-for-the-iframe-on-the-ipad-problem/ ). Проблемы:

Нет полос прокрутки, чтобы пользователь знал, что они могут прокручивать
Пользователи должны использовать прокрутку с двумя пальцами
Файлы PDF не центрированы (все еще работают над ним)

<!DOCTYPE HTML>

<html>

<head>

<title>Testing iFrames on iPad</title>

<style>

div {

border: solid 1px green;

height:100px;

}

.scroller{

border:solid 1px #66AA66;

height: 400px;

width: 400px;

overflow: auto;

text-align:center;

}

</style>

<table>

<tr>

</div>

</td>

</div>

</td>

</tr>

<tr>

</div>

</td>

</div>

</td>

</tr>

</table>

<div> Here are some additional contents.</div>

ответ дан WhatsInAName 01 авг. '12 в 20:45

источник поделиться

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

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

main.html

<!DOCTYPE html>

<html>

<head>

#container {

position: absolute;

top: 50px;

left: 50px;

width: 400px;

height: 300px;

overflow: hidden;

}

#iframe {

width: 400px;

height: 300px;

}

</style>

</head>

<body>

</div>

</body>

</html>

test.html

<!DOCTYPE html>

<html>

<head>

html {

overflow: auto;

-webkit-overflow-scrolling: touch;

}

body {

height: 100%;

overflow: auto;

-webkit-overflow-scrolling: touch;

margin: 0;

padding: 8px;

}

</style>

</head>

<body>

…

</body>

</html>

То же самое можно было бы сделать, используя jQuery, если вы предпочитаете:

$("#iframe").contents().find("body").css({

"height": "100%",

"overflow": "auto",

"-webkit-overflow-scrolling": "touch"

});

Я использовал это решение, чтобы заставить TinyMCE (редактор Wordpress) правильно прокручиваться на iPad.

ответ дан ccallendar 19 июня '12 в 22:20

источник поделиться

Основываясь на в этой статье , я собрал следующий фрагмент, который предоставляет некоторые основные функции:

function setPDFHeight(){

$("#pdfObject")[0].height = $("#pdfObject")[0].offsetHeight;

}

$('#container').append('<div align="center" style="width: 100%; height:100%; overflow: auto !important; -webkit-overflow-scrolling: touch !important;">\

</script>

Очевидно, что он далек от совершенства (учитывая, что он практически расширяет вашу высоту страницы до бесконечности), но это единственное жизнеспособное обходное решение, которое я нашел до сих пор.

ответ дан periklis 20 окт. '14 в 14:00

источник поделиться

Ни одно из решений до сих пор не работало для меня, когда я пытался (иногда, только с ошибкой при вторичных нагрузках), но в качестве обходного пути, используя элемент объекта, как описано здесь, затем обертывание в прокручиваемое div, а затем установку объекта на очень высокую высоту (5000 пикселей) выполнил эту работу для меня. Это большой обходной путь и не работает невероятно хорошо (для стартеров страницы с более чем 5000 пикселей могут вызвать проблемы - 10000px полностью сломал его для меня), но, похоже, эта работа выполняется в некоторых моих тестовых случаях:

var style = 'left: ...px; top: ...px; ' +

'width: ...px; height: ...px; border: ...';

if (isIOs) {

style += '; overflow: scroll !important; -webkit-overflow-scrolling: touch !important;';

html = '<div style="' + style + '">' +

'<object type="text/html" data="http://example.com" ' +

'style="width: 100%; height: 5000px;"></object>' +

'</div>';

}

else {

style += '; overflow: auto;';

html = '<iframe src="http://example.com" ' +

'style="' + style + '"></iframe>';

}

В надежде, что Apple исправит проблемы Safari iFrame.

ответ дан Philipp Lenssen 23 окт. '14 в 19:56

источник поделиться

Проблема

Я поддерживаю большой, сложный, грязный старый сайт, в котором все (буквально) вложено в несколько уровней iframe - многие из которых динамически создаются и/или имеют динамический src. Это создает следующие проблемы:

Любые изменения в структуре HTML-скрипта могут нарушать скрипты и таблицы стилей, которые не были затронуты годами.
Поиск и исправление всех документов iframe и src вручную потребует слишком много времени и усилий.

Из решений, опубликованных до сих пор, этот является единственным, что я видел, который преодолевает проблему 1. К сожалению, похоже, что он не работает на некоторых фреймах, и когда это происходит, прокрутка очень глючная (что, по-видимому, вызывает другие ошибки на странице, такие как невосприимчивые ссылки и элементы управления формой).

Решение

Если приведенное выше звучит похоже на вашу ситуацию, вы можете попробовать следующую попытку script. Он отказывается от естественной прокрутки и вместо этого делает все iframes перетаскиваемыми в пределах их видового экрана. Вам нужно только добавить его в документ, содержащий фреймы верхнего уровня; он будет применять исправление по мере необходимости для них и их потомков.

Здесь работает fiddle *, и вот код:

(function() {

var mouse = false //Set mouse=true to enable mouse support

, iOS = /iPad|iPhone|iPod/.test(navigator.platform);

if(mouse || iOS) {

(function() {

var currentFrame

, startEvent, moveEvent, endEvent

, screenY, translateY, minY, maxY

, matrixPrefix, matrixSuffix

, matrixRegex = /(.*([\.\d-]+, ?){5,13})([\.\d-]+)(.*)/

, min = Math.min, max = Math.max

, topWin = window;

if(!iOS) {

startEvent = 'mousedown';

moveEvent = 'mousemove';

endEvent = 'mouseup';

}

else {

startEvent = 'touchstart';

moveEvent = 'touchmove';

endEvent = 'touchend';

}

setInterval(scrollFix, 500);

function scrollFix() {fixSubframes(topWin.frames);}

function fixSubframes(wins) {for(var i = wins.length; i; addListeners(wins[--i]));}

function addListeners(win) {

try {

var doc = win.document;

if(!doc.draggableframe) {

win.addEventListener('unload', resetFrame);

doc.draggableframe = true;

doc.addEventListener(startEvent, touchStart);

doc.addEventListener(moveEvent, touchMove);

doc.addEventListener(endEvent, touchEnd);

}

fixSubframes(win.frames);

}

catch(e) {}

}

function resetFrame(e) {

var doc = e.target

, win = doc.defaultView

, iframe = win.frameElement

, style = getComputedStyle(iframe).transform;

if(iframe===currentFrame) currentFrame = null;

win.removeEventListener('unload', resetFrame);

doc.removeEventListener(startEvent, touchStart);

doc.removeEventListener(moveEvent, touchMove);

doc.removeEventListener(endEvent, touchEnd);

if(style !== 'none') {

style = style.replace(matrixRegex, '$1|$3|$4').split('|');

iframe.style.transform = style[0] + 0 + style[2];

}

else iframe.style.transform = null;

iframe.style.WebkitClipPath = null;

iframe.style.clipPath = null;

delete doc.draggableiframe;

}

function touchStart(e) {

var iframe, style, offset, coords

, touch = e.touches ? e.touches[0] : e

, elem = touch.target

, tag = elem.tagName;

currentFrame = null;

if(tag==='TEXTAREA' || tag==='SELECT' || tag==='HTML') return;

for(;elem.parentElement; elem = elem.parentElement) {

if(elem.scrollHeight > elem.clientHeight) {

style = getComputedStyle(elem).overflowY;

if(style==='auto' || style==='scroll') return;

}

elem = elem.ownerDocument.body;

iframe = elem.ownerDocument.defaultView.frameElement;

coords = getComputedViewportY(elem.clientHeight < iframe.clientHeight ? elem : iframe);

if(coords.elemTop >= coords.top && coords.elemBottom <= coords.bottom) return;

style = getComputedStyle(iframe).transform;

if(style !== 'none') {

style = style.replace(matrixRegex, '$1|$3|$4').split('|');

matrixPrefix = style[0];

matrixSuffix = style[2];

offset = parseFloat(style[1]);

}

else {

matrixPrefix = 'matrix(1, 0, 0, 1, 0, ';

matrixSuffix = ')';

offset = 0;

}

translateY = offset;

minY = min(0, offset - (coords.elemBottom - coords.bottom));

maxY = max(0, offset + (coords.top - coords.elemTop));

screenY = touch.screenY;

currentFrame = iframe;

}

function touchMove(e) {

var touch, style;

if(currentFrame) {

touch = e.touches ? e.touches[0] : e;

style = min(maxY, max(minY, translateY + (touch.screenY - screenY)));

if(style===translateY) return;

e.preventDefault();

currentFrame.contentWindow.getSelection().removeAllRanges();

translateY = style;

currentFrame.style.transform = matrixPrefix + style + matrixSuffix;

style = 'inset(' + (-style) + 'px 0px ' + style + 'px 0px)';

currentFrame.style.WebkitClipPath = style;

currentFrame.style.clipPath = style;

screenY = touch.screenY;

}

function touchEnd() {currentFrame = null;}

function getComputedViewportY(elem) {

var style, offset

, doc = elem.ownerDocument

, bod = doc.body

, elemTop = elem.getBoundingClientRect().top + elem.clientTop

, elemBottom = elem.clientHeight

, viewportTop = elemTop

, viewportBottom = elemBottom + elemTop

, position = getComputedStyle(elem).position;

try {

while(true) {

if(elem === bod || position === 'fixed') {

if(doc.defaultView.frameElement) {

elem = doc.defaultView.frameElement;

position = getComputedStyle(elem).position;

offset = elem.getBoundingClientRect().top + elem.clientTop;

viewportTop += offset;

viewportBottom = min(viewportBottom + offset, elem.clientHeight + offset);

elemTop += offset;

doc = elem.ownerDocument;

bod = doc.body;

continue;

}

else break;

}

else {

if(position === 'absolute') {

elem = elem.offsetParent;

style = getComputedStyle(elem);

position = style.position;

if(position === 'static') continue;

}

else {

elem = elem.parentElement;

style = getComputedStyle(elem);

position = style.position;

}

if(style.overflowY !== 'visible') {

offset = elem.getBoundingClientRect().top + elem.clientTop;

viewportTop = max(viewportTop, offset);

viewportBottom = min(viewportBottom, elem.clientHeight + offset);

}

catch(e) {}

return {

top: max(viewportTop, 0)

,bottom: min(viewportBottom, doc.defaultView.innerHeight)

,elemTop: elemTop

,elemBottom: elemBottom + elemTop

};

}

})();

}

})();

* jsfiddle поддерживает поддержку мыши для тестирования. На рабочем месте вы хотите установить mouse = false.

ответ дан DoctorDestructo 04 февр. '16 в 5:55

источник поделиться

После сильного обострения я обнаружил, как прокручивать в iframe на моем ipad. Секрет заключался в том, чтобы сделать вертикальный палец (один палец был прекрасен) на стороне LEFT области iframe (и, возможно, немного за пределами границы). На ноутбуке или ПК полоса прокрутки находится справа, так что, естественно, я потратил много времени на эксперимент с iPad с движением пальцев с правой стороны. Только когда я пробовал левую сторону, прокручивался iframe.

-1

ответ дан ccs 12 нояб. '11 в 23:46

источник поделиться

Добавьте overflow: auto; к стилю, и прокрутка с двумя пальцами должна работать.

-1

Так же в этом разделе: