scrollIntoView/scrollTo when used inside iframe is not responding in IOS
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 at 8:07
HerrSerker
19.8k84778
asked Nov 22 at 22:26
Jonathan Corrin
742221
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 at 8:07
HerrSerker
19.8k84778
asked Nov 22 at 22:26
Jonathan Corrin
742221
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 at 17:02
How do you call thescrollTofunction? What value has theelparameter? What is your HTML code (structure)?
– HerrSerker
Nov 28 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 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 at 8:07
HerrSerker
19.8k84778
asked Nov 22 at 22:26
Jonathan Corrin
742221
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 at 8:07
HerrSerker
19.8k84778
asked Nov 22 at 22:26
Jonathan Corrin
742221
edited Nov 28 at 8:07
HerrSerker
19.8k84778
asked Nov 22 at 22:26
Jonathan Corrin
742221
edited Nov 28 at 8:07
HerrSerker
19.8k84778
edited Nov 28 at 8:07
HerrSerker
19.8k84778
edited Nov 28 at 8:07
HerrSerker
19.8k84778
19.8k84778
asked Nov 22 at 22:26
Jonathan Corrin
742221
asked Nov 22 at 22:26
Jonathan Corrin
742221
asked Nov 22 at 22:26
Jonathan Corrin
742221
742221
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 at 17:02
How do you call thescrollTofunction? What value has theelparameter? What is your HTML code (structure)?
– HerrSerker
Nov 28 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 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 at 17:02
How do you call thescrollTofunction? What value has theelparameter? What is your HTML code (structure)?
– HerrSerker
Nov 28 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 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 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 at 17:02
How do you call the
scrollTo function? What value has the el parameter? What is your HTML code (structure)?– HerrSerker
Nov 28 at 8:08
How do you call the
scrollTo function? What value has the el parameter? What is your HTML code (structure)?– HerrSerker
Nov 28 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 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 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 at 15:21
Scott Chambers
224316
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 at 15:21
Scott Chambers
224316
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 at 15:21
Scott Chambers
224316
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 at 15:21
Scott Chambers
224316
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 at 15:21
Scott Chambers
224316
answered Nov 29 at 15:21
Scott Chambers
224316
answered Nov 29 at 15:21
Scott Chambers
224316
answered Nov 29 at 15:21
Scott Chambers
224316
224316
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.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- 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 at 17:02
How do you call the
scrollTofunction? What value has theelparameter? What is your HTML code (structure)?– HerrSerker
Nov 28 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 at 18:23