Obtaining scroll position on mobile phone/deviceRetrieve the position (X,Y) of an HTML elementHow to Check if element is visible after scrolling?Scroll to the top of the page using JavaScript/jQuery?Maintain/Save/Restore scroll position when returning to a ListViewWhat is the best way to detect a mobile device?Check if a user has scrolled to the bottomHow to disable scrolling temporarily?jQuery scroll to elementHow to load all css and js at a time in CakephpPrevent zooming on mobile site not working
Are articles good enough to be the main source of information for PhD research?
Is it safe to unplug a blinking USB drive after 'safely' ejecting it?
What is a "major country" as named in Bernie Sanders' Healthcare debate answers?
What does "boys rule, girls drool" mean?
Unpredictability of Stock Market
Updating without Composer
Why is the return value of the fun function 8 instead of 7?
Is every eigenvector of AA an eigenvector of A?
What is the word for a person who destroys monuments?
Hobby function generators
What are the specifics for a Block of Incense?
How would you control supersoldiers in a late iron-age society?
How to convert Mn2O3 to Mn3O4?
What 68-pin connector is this on my 2.5" solid state drive?
What does this Blight Tower UI mean?
geschafft or geschaffen? which one is past participle of schaffen?
In Bb5 systems against the Sicilian, why does White exchange their b5 bishop without playing a6?
Why does an orbit become hyperbolic when total orbital energy is positive?
Why is the UK still pressing on with Brexit?
What are the typical trumpet parts in classical music?
Impossible Scrabble Words
Why 1.5fill is 0pt
Is my sink P-trap too low?
What's the benefit of prohibiting the use of techniques/language constructs that have not been taught?
Obtaining scroll position on mobile phone/device
Retrieve the position (X,Y) of an HTML elementHow to Check if element is visible after scrolling?Scroll to the top of the page using JavaScript/jQuery?Maintain/Save/Restore scroll position when returning to a ListViewWhat is the best way to detect a mobile device?Check if a user has scrolled to the bottomHow to disable scrolling temporarily?jQuery scroll to elementHow to load all css and js at a time in CakephpPrevent zooming on mobile site not working
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;
I want to make a mobile device to scroll to a certain position and then output it as an alert. My code works fine in chrome on my PC but not on mobile devices. When I run developer tools in chrome on my PC and select view on mobile devices it doesn't work, even though it works fine in the PC view mode. If I set the position to say 30 pixels the screen doesn't move at all, in mobile device view, and the alert comes back with zero. What am I doing wrong?
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link href="//fonts.googleapis.com/css?family=Open+Sans:400,400i,300,700" rel="stylesheet" type="text/css">
<script src="crafty/crafty_postcode.class.js"></script>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="https://cc-cdn.com/generic/scripts/v1/cc_c2a.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">
</script>
</head>
<body id="mainBodyId" style="margin-left:0.25cm;height: 1500px;width:1200px;" >'
<script language="JavaScript" type="text/javascript">
window.scrollTo(0,30);
alert('Current scroll from the top: ' + window.pageYOffset);
</script>
<form>
<span>
1<br>2<br>3<br>4<br>5<br>6<br>6<br>7<br>8<br>9<br>10<br>1<br>2<br>3<br>4
<br>5<br>6<br>6<br>7<br>8<br>9<br>10<br>1<br>2<br>3<br>4<br>5<br>6<br>6<br>7
<button>test</button>
<br>8<br>9<br>10<br>1<br>2<br>3<br>4<br>5<br>6<br>6<br>7<br>8<br>9<br>10<br>
1<br>2<br>3<br>4<br>5<br>6<br>6<br>
<button>test</button>
1<br>2<br>3<br>4<br>5<br>6<br>6<br>7<br>8<br>9<br>10<br>1<br>2<br>3<br>4<br>
5<br>6<br>6<br>7<br>8<br>9<br>10<br>1<br>2<br>3<br>4<br>5<br>6<br>6<br>7<br>
8<br>9<br>10<br>1<br>2<br>3<br>4<br>5<br>6<br>6<br>7<br>8<br>9<br>10<br>1<br>
2<br>3<br>4<br>5<br>6<br>6<br>7<br>8<br>
<button>test</button>
<br>10<br>1<br>2<br>3<br>4<br>5<br>6<br>6<br>7<br>8<br>9<br>10<br>1<br>2<br>3
<br>4<br>5<br>
<button>test</button>
6<br>6<br>7<br>8<br>9<br>10<br>1<br>2<br>3<br>4<br>5<br>6<br>6<br>7<br>8<br>
9<br>10<br>1<br>2<br>3<br>4<br>5<br>6<br>6<br>7<br>8<br>9<br>10<br>1<br>2<br>
3<br>4<br>5<br>6<br>6<br>7<br>8<br>9<br>10<br>1<br>2<br>3<br>4<br>5<br>6<br>6
<br>7<br>8<br>9
<button>test</button>
<br>10<br>1<br>2<br>3<br>4<br>5<br>6<br>6<br>7<br>8<br>9<br>10<br>1<br>2<br>
3<br>4<br>5<br>6<br>6<br>7<br>8<br>9<br>10<br>
<button>test</button>
</span>
</form>
</body>
</html>
I expect the screen to move to 30 pixels vertically and the alert to output 30 while in chrome developer tools, mobile device view.
javascript mobile scroll
add a comment
|
I want to make a mobile device to scroll to a certain position and then output it as an alert. My code works fine in chrome on my PC but not on mobile devices. When I run developer tools in chrome on my PC and select view on mobile devices it doesn't work, even though it works fine in the PC view mode. If I set the position to say 30 pixels the screen doesn't move at all, in mobile device view, and the alert comes back with zero. What am I doing wrong?
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link href="//fonts.googleapis.com/css?family=Open+Sans:400,400i,300,700" rel="stylesheet" type="text/css">
<script src="crafty/crafty_postcode.class.js"></script>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="https://cc-cdn.com/generic/scripts/v1/cc_c2a.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">
</script>
</head>
<body id="mainBodyId" style="margin-left:0.25cm;height: 1500px;width:1200px;" >'
<script language="JavaScript" type="text/javascript">
window.scrollTo(0,30);
alert('Current scroll from the top: ' + window.pageYOffset);
</script>
<form>
<span>
1<br>2<br>3<br>4<br>5<br>6<br>6<br>7<br>8<br>9<br>10<br>1<br>2<br>3<br>4
<br>5<br>6<br>6<br>7<br>8<br>9<br>10<br>1<br>2<br>3<br>4<br>5<br>6<br>6<br>7
<button>test</button>
<br>8<br>9<br>10<br>1<br>2<br>3<br>4<br>5<br>6<br>6<br>7<br>8<br>9<br>10<br>
1<br>2<br>3<br>4<br>5<br>6<br>6<br>
<button>test</button>
1<br>2<br>3<br>4<br>5<br>6<br>6<br>7<br>8<br>9<br>10<br>1<br>2<br>3<br>4<br>
5<br>6<br>6<br>7<br>8<br>9<br>10<br>1<br>2<br>3<br>4<br>5<br>6<br>6<br>7<br>
8<br>9<br>10<br>1<br>2<br>3<br>4<br>5<br>6<br>6<br>7<br>8<br>9<br>10<br>1<br>
2<br>3<br>4<br>5<br>6<br>6<br>7<br>8<br>
<button>test</button>
<br>10<br>1<br>2<br>3<br>4<br>5<br>6<br>6<br>7<br>8<br>9<br>10<br>1<br>2<br>3
<br>4<br>5<br>
<button>test</button>
6<br>6<br>7<br>8<br>9<br>10<br>1<br>2<br>3<br>4<br>5<br>6<br>6<br>7<br>8<br>
9<br>10<br>1<br>2<br>3<br>4<br>5<br>6<br>6<br>7<br>8<br>9<br>10<br>1<br>2<br>
3<br>4<br>5<br>6<br>6<br>7<br>8<br>9<br>10<br>1<br>2<br>3<br>4<br>5<br>6<br>6
<br>7<br>8<br>9
<button>test</button>
<br>10<br>1<br>2<br>3<br>4<br>5<br>6<br>6<br>7<br>8<br>9<br>10<br>1<br>2<br>
3<br>4<br>5<br>6<br>6<br>7<br>8<br>9<br>10<br>
<button>test</button>
</span>
</form>
</body>
</html>
I expect the screen to move to 30 pixels vertically and the alert to output 30 while in chrome developer tools, mobile device view.
javascript mobile scroll
add a comment
|
I want to make a mobile device to scroll to a certain position and then output it as an alert. My code works fine in chrome on my PC but not on mobile devices. When I run developer tools in chrome on my PC and select view on mobile devices it doesn't work, even though it works fine in the PC view mode. If I set the position to say 30 pixels the screen doesn't move at all, in mobile device view, and the alert comes back with zero. What am I doing wrong?
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link href="//fonts.googleapis.com/css?family=Open+Sans:400,400i,300,700" rel="stylesheet" type="text/css">
<script src="crafty/crafty_postcode.class.js"></script>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="https://cc-cdn.com/generic/scripts/v1/cc_c2a.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">
</script>
</head>
<body id="mainBodyId" style="margin-left:0.25cm;height: 1500px;width:1200px;" >'
<script language="JavaScript" type="text/javascript">
window.scrollTo(0,30);
alert('Current scroll from the top: ' + window.pageYOffset);
</script>
<form>
<span>
1<br>2<br>3<br>4<br>5<br>6<br>6<br>7<br>8<br>9<br>10<br>1<br>2<br>3<br>4
<br>5<br>6<br>6<br>7<br>8<br>9<br>10<br>1<br>2<br>3<br>4<br>5<br>6<br>6<br>7
<button>test</button>
<br>8<br>9<br>10<br>1<br>2<br>3<br>4<br>5<br>6<br>6<br>7<br>8<br>9<br>10<br>
1<br>2<br>3<br>4<br>5<br>6<br>6<br>
<button>test</button>
1<br>2<br>3<br>4<br>5<br>6<br>6<br>7<br>8<br>9<br>10<br>1<br>2<br>3<br>4<br>
5<br>6<br>6<br>7<br>8<br>9<br>10<br>1<br>2<br>3<br>4<br>5<br>6<br>6<br>7<br>
8<br>9<br>10<br>1<br>2<br>3<br>4<br>5<br>6<br>6<br>7<br>8<br>9<br>10<br>1<br>
2<br>3<br>4<br>5<br>6<br>6<br>7<br>8<br>
<button>test</button>
<br>10<br>1<br>2<br>3<br>4<br>5<br>6<br>6<br>7<br>8<br>9<br>10<br>1<br>2<br>3
<br>4<br>5<br>
<button>test</button>
6<br>6<br>7<br>8<br>9<br>10<br>1<br>2<br>3<br>4<br>5<br>6<br>6<br>7<br>8<br>
9<br>10<br>1<br>2<br>3<br>4<br>5<br>6<br>6<br>7<br>8<br>9<br>10<br>1<br>2<br>
3<br>4<br>5<br>6<br>6<br>7<br>8<br>9<br>10<br>1<br>2<br>3<br>4<br>5<br>6<br>6
<br>7<br>8<br>9
<button>test</button>
<br>10<br>1<br>2<br>3<br>4<br>5<br>6<br>6<br>7<br>8<br>9<br>10<br>1<br>2<br>
3<br>4<br>5<br>6<br>6<br>7<br>8<br>9<br>10<br>
<button>test</button>
</span>
</form>
</body>
</html>
I expect the screen to move to 30 pixels vertically and the alert to output 30 while in chrome developer tools, mobile device view.
javascript mobile scroll
I want to make a mobile device to scroll to a certain position and then output it as an alert. My code works fine in chrome on my PC but not on mobile devices. When I run developer tools in chrome on my PC and select view on mobile devices it doesn't work, even though it works fine in the PC view mode. If I set the position to say 30 pixels the screen doesn't move at all, in mobile device view, and the alert comes back with zero. What am I doing wrong?
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link href="//fonts.googleapis.com/css?family=Open+Sans:400,400i,300,700" rel="stylesheet" type="text/css">
<script src="crafty/crafty_postcode.class.js"></script>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="https://cc-cdn.com/generic/scripts/v1/cc_c2a.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">
</script>
</head>
<body id="mainBodyId" style="margin-left:0.25cm;height: 1500px;width:1200px;" >'
<script language="JavaScript" type="text/javascript">
window.scrollTo(0,30);
alert('Current scroll from the top: ' + window.pageYOffset);
</script>
<form>
<span>
1<br>2<br>3<br>4<br>5<br>6<br>6<br>7<br>8<br>9<br>10<br>1<br>2<br>3<br>4
<br>5<br>6<br>6<br>7<br>8<br>9<br>10<br>1<br>2<br>3<br>4<br>5<br>6<br>6<br>7
<button>test</button>
<br>8<br>9<br>10<br>1<br>2<br>3<br>4<br>5<br>6<br>6<br>7<br>8<br>9<br>10<br>
1<br>2<br>3<br>4<br>5<br>6<br>6<br>
<button>test</button>
1<br>2<br>3<br>4<br>5<br>6<br>6<br>7<br>8<br>9<br>10<br>1<br>2<br>3<br>4<br>
5<br>6<br>6<br>7<br>8<br>9<br>10<br>1<br>2<br>3<br>4<br>5<br>6<br>6<br>7<br>
8<br>9<br>10<br>1<br>2<br>3<br>4<br>5<br>6<br>6<br>7<br>8<br>9<br>10<br>1<br>
2<br>3<br>4<br>5<br>6<br>6<br>7<br>8<br>
<button>test</button>
<br>10<br>1<br>2<br>3<br>4<br>5<br>6<br>6<br>7<br>8<br>9<br>10<br>1<br>2<br>3
<br>4<br>5<br>
<button>test</button>
6<br>6<br>7<br>8<br>9<br>10<br>1<br>2<br>3<br>4<br>5<br>6<br>6<br>7<br>8<br>
9<br>10<br>1<br>2<br>3<br>4<br>5<br>6<br>6<br>7<br>8<br>9<br>10<br>1<br>2<br>
3<br>4<br>5<br>6<br>6<br>7<br>8<br>9<br>10<br>1<br>2<br>3<br>4<br>5<br>6<br>6
<br>7<br>8<br>9
<button>test</button>
<br>10<br>1<br>2<br>3<br>4<br>5<br>6<br>6<br>7<br>8<br>9<br>10<br>1<br>2<br>
3<br>4<br>5<br>6<br>6<br>7<br>8<br>9<br>10<br>
<button>test</button>
</span>
</form>
</body>
</html>
I expect the screen to move to 30 pixels vertically and the alert to output 30 while in chrome developer tools, mobile device view.
javascript mobile scroll
javascript mobile scroll
edited Mar 29 at 8:08
James Currie
asked Mar 28 at 12:54
James CurrieJames Currie
95 bronze badges
95 bronze badges
add a comment
|
add a comment
|
1 Answer
1
active
oldest
votes
Try this out instead of window.scrollTo(0, 30)
window.addEventListener('load', function()
window.scrollTo(0,30);
);
Your suggestion works in the desktop view mode(in developer tools) but not when I toggle to view it in the mobile device mode.
– James Currie
Mar 30 at 7:54
Hey @JamesCurrie I've updated the code and it works on mobile device as well. I'm not sure why it is not working with chorme mobile view, but I tested it on actual mobile device and it sure works.
– Tanmay_vijay
Mar 30 at 17:28
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/4.0/"u003ecc by-sa 4.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%2f55398195%2fobtaining-scroll-position-on-mobile-phone-device%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
Try this out instead of window.scrollTo(0, 30)
window.addEventListener('load', function()
window.scrollTo(0,30);
);
Your suggestion works in the desktop view mode(in developer tools) but not when I toggle to view it in the mobile device mode.
– James Currie
Mar 30 at 7:54
Hey @JamesCurrie I've updated the code and it works on mobile device as well. I'm not sure why it is not working with chorme mobile view, but I tested it on actual mobile device and it sure works.
– Tanmay_vijay
Mar 30 at 17:28
add a comment
|
Try this out instead of window.scrollTo(0, 30)
window.addEventListener('load', function()
window.scrollTo(0,30);
);
Your suggestion works in the desktop view mode(in developer tools) but not when I toggle to view it in the mobile device mode.
– James Currie
Mar 30 at 7:54
Hey @JamesCurrie I've updated the code and it works on mobile device as well. I'm not sure why it is not working with chorme mobile view, but I tested it on actual mobile device and it sure works.
– Tanmay_vijay
Mar 30 at 17:28
add a comment
|
Try this out instead of window.scrollTo(0, 30)
window.addEventListener('load', function()
window.scrollTo(0,30);
);
Try this out instead of window.scrollTo(0, 30)
window.addEventListener('load', function()
window.scrollTo(0,30);
);
edited Mar 30 at 17:27
answered Mar 29 at 8:34
Tanmay_vijayTanmay_vijay
3511 silver badge11 bronze badges
3511 silver badge11 bronze badges
Your suggestion works in the desktop view mode(in developer tools) but not when I toggle to view it in the mobile device mode.
– James Currie
Mar 30 at 7:54
Hey @JamesCurrie I've updated the code and it works on mobile device as well. I'm not sure why it is not working with chorme mobile view, but I tested it on actual mobile device and it sure works.
– Tanmay_vijay
Mar 30 at 17:28
add a comment
|
Your suggestion works in the desktop view mode(in developer tools) but not when I toggle to view it in the mobile device mode.
– James Currie
Mar 30 at 7:54
Hey @JamesCurrie I've updated the code and it works on mobile device as well. I'm not sure why it is not working with chorme mobile view, but I tested it on actual mobile device and it sure works.
– Tanmay_vijay
Mar 30 at 17:28
Your suggestion works in the desktop view mode(in developer tools) but not when I toggle to view it in the mobile device mode.
– James Currie
Mar 30 at 7:54
Your suggestion works in the desktop view mode(in developer tools) but not when I toggle to view it in the mobile device mode.
– James Currie
Mar 30 at 7:54
Hey @JamesCurrie I've updated the code and it works on mobile device as well. I'm not sure why it is not working with chorme mobile view, but I tested it on actual mobile device and it sure works.
– Tanmay_vijay
Mar 30 at 17:28
Hey @JamesCurrie I've updated the code and it works on mobile device as well. I'm not sure why it is not working with chorme mobile view, but I tested it on actual mobile device and it sure works.
– Tanmay_vijay
Mar 30 at 17:28
add a comment
|
Got a question that you can’t ask on public Stack Overflow? Learn more about sharing private information with Stack Overflow for Teams.
Got a question that you can’t ask on public Stack Overflow? Learn more about sharing private information with Stack Overflow for Teams.
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%2f55398195%2fobtaining-scroll-position-on-mobile-phone-device%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