‎Scroll by Twitter on the App Store

Содержание

How to set ipad scroll direction
Natural scrolling vs. unnatural scrolling
Need help? ask idb!
Прокрутка на ipad

How to set ipad scroll direction

To adjust how the onscreen content is scrolled, do the following:

Open the Settings app on your iOS device with iOS or iPadOS 13.4
Choose General from the list.
Depending on your accessory, tap Trackpad or Trackpad & Mouse.
On the adjustment screen that appears, enable or disable the toggle Natural Scrolling.

By default, Natural Scrolling is enabled.

Your trackpad settings let you adjust iPad scroll direction

As mentioned earlier in this tutorial, turning this option on will make onscreen content track the movement of your fingers on the trackpad or the surface of your Magic Mouse. If you come from a non-Apple platform like Windows or Linux, it may be a good idea to disable natural scrolling in order to make your iPad feel more familiar to what you’ve been using.

Natural scrolling vs. unnatural scrolling

By default, iPad scroll direction is set in such a way that makes onscreen content track the movement of your fingers on the trackpad or mouse surface. As a result, the contents of the screen move in the direction opposite to your finger movement on the trackpad.

For instance, drag up on the trackpad and content such as a webpage in Safari will move down, and vice versa — they’re calling it natural scrolling. If you come from Apple platforms, your mind kinda expects scrolling to work that way as this is how it’s always worked in iOS.

On Windows and other non-Apple platforms, however, onscreen contents moves in the same direction as your fingers are moving on the trackpad. As a result, dragging down on the trackpad or mouse surface makes the contents of the screen move down, and vice versa.

Need help? ask idb!

If you like this tutorial, pass it along to your friends and leave a comment below.

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

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

</div>

Но если вы не можете прокручивать вверх и вниз внутри iframe, как показано на рисунке ниже, ‎Scroll by Twitter on the App Store

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

‎Scroll by Twitter on the App Store

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

ответ дан 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/2021/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=»https://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