scrollIntoView/scrollTo when used inside iframe is not responding in IOS
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
I have an application thats displays on a website using iframe.
Please see this jsfiddle -> http://jsfiddle.net/7Leatwyu/
Here is also a stackblitz that has a similar code setup as my angular app
https://stackblitz.com/edit/angular-c2dnea
Here youll see ive tried a few things like adding CSS styling to account for scrolling including:
position: absolute;
top: 0;
left: 0;
right: 0;
bottom:0;
height: 100%;
overflow: auto;
width: 100%;
background-color: white;
z-index: 1000;
-webkit-overflow-scrolling: touch;
When you answer a question or click the next button, it uses the code below to scrollTo the correct next question. As youll see - for every device aside from iPhone (IOS) it works. For IOS - it does not work.
scrollTo(el): void {
const element = document.querySelector(`#${el}`)
element.scrollIntoView({behavior: "smooth", block: "start", inline: "nearest"});
}
After this is called im expecting the window to scroll to the next question but it doesnt. Are there any work arounds out there? Ive been researching this for a week now and have tried many different javascript and CSS solutions that did not work.
Help..
javascript html css iframe angular7
edited Nov 28 '18 at 8:07
yunzen
22.2k85082
asked Nov 22 '18 at 22:26
Jonathan CorrinJonathan Corrin
892221
add a comment |
I have an application thats displays on a website using iframe.
Please see this jsfiddle -> http://jsfiddle.net/7Leatwyu/
Here is also a stackblitz that has a similar code setup as my angular app
https://stackblitz.com/edit/angular-c2dnea
Here youll see ive tried a few things like adding CSS styling to account for scrolling including:
position: absolute;
top: 0;
left: 0;
right: 0;
bottom:0;
height: 100%;
overflow: auto;
width: 100%;
background-color: white;
z-index: 1000;
-webkit-overflow-scrolling: touch;
When you answer a question or click the next button, it uses the code below to scrollTo the correct next question. As youll see - for every device aside from iPhone (IOS) it works. For IOS - it does not work.
scrollTo(el): void {
const element = document.querySelector(`#${el}`)
element.scrollIntoView({behavior: "smooth", block: "start", inline: "nearest"});
}
After this is called im expecting the window to scroll to the next question but it doesnt. Are there any work arounds out there? Ive been researching this for a week now and have tried many different javascript and CSS solutions that did not work.
Help..
javascript html css iframe angular7
edited Nov 28 '18 at 8:07
yunzen
22.2k85082
asked Nov 22 '18 at 22:26
Jonathan CorrinJonathan Corrin
892221
I tested on my IOS device and it works. Not the same animation but I can't find anything wrong. Maybe you fix it already?
– read
Nov 27 '18 at 17:02
How do you call thescrollTofunction? What value has theelparameter? What is your HTML code (structure)?
– yunzen
Nov 28 '18 at 8:08
So those links up there no longer go to the version that wasnt working. I had to redo the entire flow to get it to work (not the scrollTo but the UI). @HerrSerker The scrollTo is called on click. The el is the string that I use to find the element to scroll to. And the html structure is an angular template. It uses the (click) event binder to call the scrollTo function which scrolls to the element itself
– Jonathan Corrin
Nov 28 '18 at 18:23
add a comment |
I have an application thats displays on a website using iframe.
Please see this jsfiddle -> http://jsfiddle.net/7Leatwyu/
Here is also a stackblitz that has a similar code setup as my angular app
https://stackblitz.com/edit/angular-c2dnea
Here youll see ive tried a few things like adding CSS styling to account for scrolling including:
position: absolute;
top: 0;
left: 0;
right: 0;
bottom:0;
height: 100%;
overflow: auto;
width: 100%;
background-color: white;
z-index: 1000;
-webkit-overflow-scrolling: touch;
When you answer a question or click the next button, it uses the code below to scrollTo the correct next question. As youll see - for every device aside from iPhone (IOS) it works. For IOS - it does not work.
scrollTo(el): void {
const element = document.querySelector(`#${el}`)
element.scrollIntoView({behavior: "smooth", block: "start", inline: "nearest"});
}
After this is called im expecting the window to scroll to the next question but it doesnt. Are there any work arounds out there? Ive been researching this for a week now and have tried many different javascript and CSS solutions that did not work.
Help..
javascript html css iframe angular7
edited Nov 28 '18 at 8:07
yunzen
22.2k85082
asked Nov 22 '18 at 22:26
Jonathan CorrinJonathan Corrin
892221
I have an application thats displays on a website using iframe.
Please see this jsfiddle -> http://jsfiddle.net/7Leatwyu/
Here is also a stackblitz that has a similar code setup as my angular app
https://stackblitz.com/edit/angular-c2dnea
Here youll see ive tried a few things like adding CSS styling to account for scrolling including:
position: absolute;
top: 0;
left: 0;
right: 0;
bottom:0;
height: 100%;
overflow: auto;
width: 100%;
background-color: white;
z-index: 1000;
-webkit-overflow-scrolling: touch;
When you answer a question or click the next button, it uses the code below to scrollTo the correct next question. As youll see - for every device aside from iPhone (IOS) it works. For IOS - it does not work.
scrollTo(el): void {
const element = document.querySelector(`#${el}`)
element.scrollIntoView({behavior: "smooth", block: "start", inline: "nearest"});
}
After this is called im expecting the window to scroll to the next question but it doesnt. Are there any work arounds out there? Ive been researching this for a week now and have tried many different javascript and CSS solutions that did not work.
Help..
javascript html css iframe angular7
javascript html css iframe angular7
edited Nov 28 '18 at 8:07
yunzen
22.2k85082
asked Nov 22 '18 at 22:26
Jonathan CorrinJonathan Corrin
892221
edited Nov 28 '18 at 8:07
yunzen
22.2k85082
asked Nov 22 '18 at 22:26
Jonathan CorrinJonathan Corrin
892221
edited Nov 28 '18 at 8:07
yunzen
22.2k85082
edited Nov 28 '18 at 8:07
yunzen
22.2k85082
edited Nov 28 '18 at 8:07
yunzen
22.2k85082
22.2k85082
asked Nov 22 '18 at 22:26
Jonathan CorrinJonathan Corrin
892221
asked Nov 22 '18 at 22:26
Jonathan CorrinJonathan Corrin
892221
asked Nov 22 '18 at 22:26
Jonathan CorrinJonathan Corrin
892221
892221
I tested on my IOS device and it works. Not the same animation but I can't find anything wrong. Maybe you fix it already?
– read
Nov 27 '18 at 17:02
How do you call thescrollTofunction? What value has theelparameter? What is your HTML code (structure)?
– yunzen
Nov 28 '18 at 8:08
So those links up there no longer go to the version that wasnt working. I had to redo the entire flow to get it to work (not the scrollTo but the UI). @HerrSerker The scrollTo is called on click. The el is the string that I use to find the element to scroll to. And the html structure is an angular template. It uses the (click) event binder to call the scrollTo function which scrolls to the element itself
– Jonathan Corrin
Nov 28 '18 at 18:23
add a comment |
I tested on my IOS device and it works. Not the same animation but I can't find anything wrong. Maybe you fix it already?
– read
Nov 27 '18 at 17:02
How do you call thescrollTofunction? What value has theelparameter? What is your HTML code (structure)?
– yunzen
Nov 28 '18 at 8:08
So those links up there no longer go to the version that wasnt working. I had to redo the entire flow to get it to work (not the scrollTo but the UI). @HerrSerker The scrollTo is called on click. The el is the string that I use to find the element to scroll to. And the html structure is an angular template. It uses the (click) event binder to call the scrollTo function which scrolls to the element itself
– Jonathan Corrin
Nov 28 '18 at 18:23
I tested on my IOS device and it works. Not the same animation but I can't find anything wrong. Maybe you fix it already?
– read
Nov 27 '18 at 17:02
I tested on my IOS device and it works. Not the same animation but I can't find anything wrong. Maybe you fix it already?
– read
Nov 27 '18 at 17:02
How do you call the
scrollTo function? What value has the el parameter? What is your HTML code (structure)?– yunzen
Nov 28 '18 at 8:08
How do you call the
scrollTo function? What value has the el parameter? What is your HTML code (structure)?– yunzen
Nov 28 '18 at 8:08
So those links up there no longer go to the version that wasnt working. I had to redo the entire flow to get it to work (not the scrollTo but the UI). @HerrSerker The scrollTo is called on click. The el is the string that I use to find the element to scroll to. And the html structure is an angular template. It uses the (click) event binder to call the scrollTo function which scrolls to the element itself
– Jonathan Corrin
Nov 28 '18 at 18:23
So those links up there no longer go to the version that wasnt working. I had to redo the entire flow to get it to work (not the scrollTo but the UI). @HerrSerker The scrollTo is called on click. The el is the string that I use to find the element to scroll to. And the html structure is an angular template. It uses the (click) event binder to call the scrollTo function which scrolls to the element itself
– Jonathan Corrin
Nov 28 '18 at 18:23
add a comment |
1 Answer
1
active
oldest
votes
I do hate multiple browsers. Makes life as web designer a pain.
Anyway caniuse scrollIntoView Doesn't have the best support on OLDER safari browsers. Still isnt 100% on newer ones.
Would it be possible to use jquery??
$('html, body').animate({
scrollTop: $("div.top").offset().top
}, 1000)
Like so?
$(document).ready(function () {
$('#submit').click(function (){
$('html, body').animate({
scrollTop: $(".somediv").offset().top
}, 1000)
})
});.somediv {
width: 100%;
height: 100vh;
background-color: blue;
margin-top: 100vh;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text"><br />
<a id="submit" href="#">Submit</a>
<div class="somediv"></div>I don't know if this is exactly what your trying to achieve. Just another way at looking at the scroll to next.
You can always wrap it in an if statement first :)
answered Nov 29 '18 at 15:21
Scott ChambersScott Chambers
228417
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53438639%2fscrollintoview-scrollto-when-used-inside-iframe-is-not-responding-in-ios%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
I do hate multiple browsers. Makes life as web designer a pain.
Anyway caniuse scrollIntoView Doesn't have the best support on OLDER safari browsers. Still isnt 100% on newer ones.
Would it be possible to use jquery??
$('html, body').animate({
scrollTop: $("div.top").offset().top
}, 1000)
Like so?
$(document).ready(function () {
$('#submit').click(function (){
$('html, body').animate({
scrollTop: $(".somediv").offset().top
}, 1000)
})
});.somediv {
width: 100%;
height: 100vh;
background-color: blue;
margin-top: 100vh;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text"><br />
<a id="submit" href="#">Submit</a>
<div class="somediv"></div>I don't know if this is exactly what your trying to achieve. Just another way at looking at the scroll to next.
You can always wrap it in an if statement first :)
answered Nov 29 '18 at 15:21
Scott ChambersScott Chambers
228417
add a comment |
I do hate multiple browsers. Makes life as web designer a pain.
Anyway caniuse scrollIntoView Doesn't have the best support on OLDER safari browsers. Still isnt 100% on newer ones.
Would it be possible to use jquery??
$('html, body').animate({
scrollTop: $("div.top").offset().top
}, 1000)
Like so?
$(document).ready(function () {
$('#submit').click(function (){
$('html, body').animate({
scrollTop: $(".somediv").offset().top
}, 1000)
})
});.somediv {
width: 100%;
height: 100vh;
background-color: blue;
margin-top: 100vh;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text"><br />
<a id="submit" href="#">Submit</a>
<div class="somediv"></div>I don't know if this is exactly what your trying to achieve. Just another way at looking at the scroll to next.
You can always wrap it in an if statement first :)
answered Nov 29 '18 at 15:21
Scott ChambersScott Chambers
228417
add a comment |
I do hate multiple browsers. Makes life as web designer a pain.
Anyway caniuse scrollIntoView Doesn't have the best support on OLDER safari browsers. Still isnt 100% on newer ones.
Would it be possible to use jquery??
$('html, body').animate({
scrollTop: $("div.top").offset().top
}, 1000)
Like so?
$(document).ready(function () {
$('#submit').click(function (){
$('html, body').animate({
scrollTop: $(".somediv").offset().top
}, 1000)
})
});.somediv {
width: 100%;
height: 100vh;
background-color: blue;
margin-top: 100vh;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text"><br />
<a id="submit" href="#">Submit</a>
<div class="somediv"></div>I don't know if this is exactly what your trying to achieve. Just another way at looking at the scroll to next.
You can always wrap it in an if statement first :)
answered Nov 29 '18 at 15:21
Scott ChambersScott Chambers
228417
I do hate multiple browsers. Makes life as web designer a pain.
Anyway caniuse scrollIntoView Doesn't have the best support on OLDER safari browsers. Still isnt 100% on newer ones.
Would it be possible to use jquery??
$('html, body').animate({
scrollTop: $("div.top").offset().top
}, 1000)
Like so?
$(document).ready(function () {
$('#submit').click(function (){
$('html, body').animate({
scrollTop: $(".somediv").offset().top
}, 1000)
})
});.somediv {
width: 100%;
height: 100vh;
background-color: blue;
margin-top: 100vh;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text"><br />
<a id="submit" href="#">Submit</a>
<div class="somediv"></div>I don't know if this is exactly what your trying to achieve. Just another way at looking at the scroll to next.
You can always wrap it in an if statement first :)
$(document).ready(function () {
$('#submit').click(function (){
$('html, body').animate({
scrollTop: $(".somediv").offset().top
}, 1000)
})
});.somediv {
width: 100%;
height: 100vh;
background-color: blue;
margin-top: 100vh;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text"><br />
<a id="submit" href="#">Submit</a>
<div class="somediv"></div>$(document).ready(function () {
$('#submit').click(function (){
$('html, body').animate({
scrollTop: $(".somediv").offset().top
}, 1000)
})
});.somediv {
width: 100%;
height: 100vh;
background-color: blue;
margin-top: 100vh;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text"><br />
<a id="submit" href="#">Submit</a>
<div class="somediv"></div>answered Nov 29 '18 at 15:21
Scott ChambersScott Chambers
228417
answered Nov 29 '18 at 15:21
Scott ChambersScott Chambers
228417
answered Nov 29 '18 at 15:21
Scott ChambersScott Chambers
228417
answered Nov 29 '18 at 15:21
Scott ChambersScott Chambers
228417
228417
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53438639%2fscrollintoview-scrollto-when-used-inside-iframe-is-not-responding-in-ios%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
I tested on my IOS device and it works. Not the same animation but I can't find anything wrong. Maybe you fix it already?
– read
Nov 27 '18 at 17:02
How do you call the
scrollTofunction? What value has theelparameter? What is your HTML code (structure)?– yunzen
Nov 28 '18 at 8:08
So those links up there no longer go to the version that wasnt working. I had to redo the entire flow to get it to work (not the scrollTo but the UI). @HerrSerker The scrollTo is called on click. The el is the string that I use to find the element to scroll to. And the html structure is an angular template. It uses the (click) event binder to call the scrollTo function which scrolls to the element itself
– Jonathan Corrin
Nov 28 '18 at 18:23