safari scrolltop not working

Workaround for Mobile Safari scrollTop() not updating during scroll

Although I put in a great effort into researching all the topics I cover, mistakes can happen. Use of any information from my blog posts should be at own risk and I do not hold any liability towards any information misuse or damages caused by following any of my posts.

"Please Google, Help me!"

Another Web Development Blog

Miscellaneous
Random Stuff

jQuery scrollTop not working on Mobile Devices (iPhone, iPad, Android Phones)

Today is a nasty day, the day when we discovered that our beloved $(selector).scrollTop(), a child method of $(selector).animate(), is not working properly on mobile devices. On mobiles the javascript call simply blink on the top of the page, making our boss disappointed. To tell you the truth it’s not your fault and this is why…

Mobile devices often doesn’t scroll the page moving the <html> or <body> elements, they move the viewport as far as i understood, we don’t really care, what we care is how make things shine again. Typically you’ll scrollTop or, better, animate with something like this:

which is fine, but as i said, it’s not working on mobile devices. The solution? Here we are

or simply as suggested by Alex in the comments

Thanks to the navigator.userAgent we know the device and discriminate the if-else. scrollTo can’t use fancy animations like jquery animate, but it does the job. That’s all folks.

Write comment
Comments RSS
Trackback ( 0 )
Comments ( 26 )
Junior Santos
March 19th, 2013

But, and the animation at mobile?

Jonathan Argentiero

Removed, why? Because you would find that most of the mobile devices actually have a really bad performance impact on javascript animations, the simplest transition would became laggy at the moment. The reason? Many, but the first one is phones and tables processor and their browser core coding, which is not optimized for this kind of things.

If you are running a mobile project you should suggest your clients to avoid using heavy animations on mobiles because of this, a laggy animations results in worse appeal than a simple blink.

May 10th, 2013

I am here to help. The reason is because the mobile ios doesn’t know what $(‘html,body’)is. You have to animate $(“body”) instead.

May 11th, 2013

Thank you a lot. Comment added to the post 😀

Permana Jayanta
August 5th, 2014

I try to animate body, it works but it flashes up and down for a few times until it jump to correct div. Have you experienced like this before?

If you are using an element as the trigger try putting e.preventDefault(). With jquery usually $().click(function(e){ e.preventDefault(); //other stuff });

August 6th, 2013

Thanks! This was helpful!

October 1st, 2013

Thanks a million as this was a great help to me 🙂

January 8th, 2014

Totally thank you for the save 🙂 By the way your blog header is amazing 🙂 why u not get website? 😀 😀

Because i merely make some posts during job breaks and my topics are not worth a site, but thank you for the compliments 🙂

October 31st, 2014

Thanks. You saved my day. It’s very helpful.

March 13th, 2015

My animate method is working fine in Ipad in all the html pages but in one page it is lagging and loading slowly, even in that page i don’t have big functionality.Here is my code please help me.

Your code is pretty plain, i don’t see many correction you can do. So my suggestion is this: jQuery animate on older iPads (1,2) can be pretty slow, it depends on the performance of the machine.

Going straight to the point i’d suggest you to use jQuery transit : http://ricostacruz.com/jquery.transit/

This library will make use of css animations, which are faster on mobile devices.

September 30th, 2015

This is great. Though I just cant get it to work on my ipad mini, nor does it work on friends’ iPhones. If you could look at my codepen and see if there is anything I can do…Ive been up all night trying to fix it haha

http://codepen.io/Spekachu/full/wKomgm http://app.crossbrowsertesting.com/livetests/run/3748743

I want the same scrolling functionality if I can have it, but even the window.scrollto will not do anything on my ipad or iphones.

October 12th, 2015

Sorry that I arrive so late, try to look at this! http://stackoverflow.com/questions/19929197/javascript-window-scrollto-issue-on-ipad Good luck 🙂

November 5th, 2015

How do I use this for instafeed js plugin? I want my feed infinite scroll. Right now my code look like this. It works in desktop, but it doesnt work in mobile.

$(window).scroll(function() { if($(window).scrollTop() + $(window).height() == $(document).height()) { // call feed.next() once the page reaches the bottom feed1.next(); feed2.next();

Jean Michell
February 10th, 2016

Nothing worked for me 🙁 I want to scroll o page with scrolltop which is inside an iframe. http://www.jeanmichellsouber.com/iframe

February 19th, 2016

If you are dealing with an iframe then the answer is $('#myIframe').contents().scrollTop() !

July 29th, 2016

Hi Jonathan! If you could please help, I would really appreciate it! I am developing an app in XDK and using Jquery to determine when the user scrolls to the bottom of first page of JSON data another page loads and more JSON data will appear. My problem is that scroll works fine in emulator and on tablet but not on the mobile phone. My code looks like this:

var currentPage = 1;

$(window).scroll(function () { if ($(window).scrollTop() === $(document).height() – $(window).height()) { currentPage++; loadMoreAds(currentPage); }

In app.css I see that by default I have: body { -webkit-touch-callout: none ; -webkit-text-size-adjust: none ; -ms-text-size-adjust: none ; -webkit-user-select: none ; -moz-user-select: none ; -ms-user-select: none ; user-select: none ; -webkit-highlight: none ; -webkit-tap-highlight-color: rgba(0,0,0,0) ; -webkit-tap-highlight-color: transparent ; /* For some Androids */ }

html { -ms-touch-action: pan-x ; }

body { -ms-touch-action: pan-y ; -ms-content-zooming: none ; } I am just beginning my programming journey so I apologize if my question is stupid. Thank you!

Sandy : Hi Jonathan! If you could please help, I would really appreciate it! I am developing an app in XDK and using Jquery to determine when the user scrolls to the bottom of first page of JSON data another page loads and more JSON data will appear. My problem is that scroll works fine in emulator and on tablet but not on the mobile phone. My code looks like this: var currentPage = 1; $(window).scroll(function () { if ($(window).scrollTop() === $(document).height() – $(window).height()) { currentPage++; loadMoreAds(currentPage); } }); In app.css I see that by default I have: body { -webkit-touch-callout: none ; -webkit-text-size-adjust: none ; -ms-text-size-adjust: none ; -webkit-user-select: none ; -moz-user-select: none ; -ms-user-select: none ; user-select: none ; -webkit-highlight: none ; -webkit-tap-highlight-color: rgba(0,0,0,0) ; -webkit-tap-highlight-color: transparent ; /* For some Androids */ } html { -ms-touch-action: pan-x ; } body { -ms-touch-action: pan-y ; -ms-content-zooming: none ; } I am just beginning my programming journey so I apologize if my question is stupid. Thank you!

$(“body”).scroll(); $(“body”).scrollTop();

instead of $(window).

Also try to understand if it’s the .scroll listener that doesn’t work or the equation to determine if the user has scrolled!

September 20th, 2016

i have tried everything mentioned above to make scrolltop work in my IPad but unable to do it, my scenario is as below application is rendering inside iframe where i want next button click should focus on top of next page. Can you please help me for it or suggest something.

Try the solution proposed for this question: http://stackoverflow.com/questions/1192228/scrolling-an-iframe-with-javascript

August 14th, 2018

You just saved my life

July 10th, 2019

if(found){ filesize= file.size; //in bytes totalFileSize += file.size; if(totalFileSize > maxsize){ var value = Math.round((totalFileSize/(1024*1024))*100)/100; //alert(‘You have exceeded the limit of size.. (‘+value+’ MB) \n Maximum limit of size you can use is 4.5MB’); totalFileSize= totalFileSize – file.size; if(isSinAttachment){ $(‘#ErrorMessage2’).show(); document.getElementById(“ErrorMessage2”).innerHTML = ‘Error: You have exceeded the limit of size.. (‘+value+’ MB). Maximum limit of size you can use is 1.0 MB.’; }else{ $(‘#ErrorMessage2’).show(); document.getElementById(“ErrorMessage2”).innerHTML = ‘Error: You have exceeded the limit of size.. (‘+value+’ MB). Maximum limit of size you can use is 4.5 MB.’; } //window.scrollBy(0, -300); if (navigator.userAgent.match(/(iPod|iPhone|iPad|Android)/)) { alert(1111111111); alert(navigator.userAgent); console.log(document.body.scrollTop,1113333111); document.body.scrollTop = 0; document.documentElement.scrollTop = 0; }else{ $(“html, body”).animate({ scrollTop: -1000 }, 600); alert(navigator.userAgent); } // $(“html, body”).animate({ scrollTop: -1000 }, 600); createTableJS(); }else{ document.getElementById(“ErrorMessage2″).innerHTML = ”; getAsTextJS(file); } }else{ document.getElementById(“ErrorMessage2”).innerHTML = errmsg; //window.scrollBy(0, -300); $(“html, body”).animate({ scrollTop: -1000 }, 600); createTableJS(); } }

August 19th, 2019

Thanks, this has worked!

May 28th, 2021

Useful information. Fortunate me I found your website accidentally, and I’m shocked why this accident did not took place earlier! I bookmarked it.

No trackbacks yet.

Skip to main content
Skip to search
Skip to select language
Sign up for free
Português (do Brasil)

Element: scrollTop property

The Element.scrollTop property gets or sets the number of pixels that an element's content is scrolled vertically.

An element's scrollTop value is a measurement of the distance from the element's top to its topmost visible content. When an element's content does not generate a vertical scrollbar, then its scrollTop value is 0 .

scrollTop can be set to any integer value, with certain caveats:

If the element can't be scrolled (e.g. it has no overflow or if the element has a property of " non-scrollable "), scrollTop is 0 .
scrollTop doesn't respond to negative values; instead, it sets itself back to 0 .
If set to a value greater than the maximum available for the element, scrollTop settles itself to the maximum value.

When scrollTop is used on the root element (the <html> element), the scrollY of the window is returned. This is a special case of scrollTop .

Warning: On systems using display scaling, scrollTop may give you a decimal value.

Scrolling an element

In this example, try scrolling the inner container with the dashed border, and see how the value of scrollTop changes.

Window sizes and scrolling

How do we find the width and height of the browser window? How do we get the full width and height of the document, including the scrolled out part? How do we scroll the page using JavaScript?

For this type of information, we can use the root document element document.documentElement , that corresponds to the <html> tag. But there are additional methods and peculiarities to consider.

Width/height of the window

To get window width and height, we can use the clientWidth/clientHeight of document.documentElement :

For instance, this button shows the height of your window:

alert(document.documentElement.clientHeight)

Browsers also support properties like window.innerWidth/innerHeight . They look like what we want, so why not to use them instead?

If there exists a scrollbar, and it occupies some space, clientWidth/clientHeight provide the width/height without it (subtract it). In other words, they return the width/height of the visible part of the document, available for the content.

window.innerWidth/innerHeight includes the scrollbar.

If there’s a scrollbar, and it occupies some space, then these two lines show different values:

In most cases, we need the available window width in order to draw or position something within scrollbars (if there are any), so we should use documentElement.clientHeight/clientWidth .

Please note: top-level geometry properties may work a little bit differently when there’s no <!DOCTYPE HTML> in HTML. Odd things are possible.

In modern HTML we should always write DOCTYPE .

Width/height of the document

Theoretically, as the root document element is document.documentElement , and it encloses all the content, we could measure the document’s full size as document.documentElement.scrollWidth/scrollHeight .

But on that element, for the whole page, these properties do not work as intended. In Chrome/Safari/Opera, if there’s no scroll, then documentElement.scrollHeight may be even less than documentElement.clientHeight ! Weird, right?

To reliably obtain the full document height, we should take the maximum of these properties:

Why so? Better don’t ask. These inconsistencies come from ancient times, not a “smart” logic.

Get the current scroll

DOM elements have their current scroll state in their scrollLeft/scrollTop properties.

For document scroll, document.documentElement.scrollLeft/scrollTop works in most browsers, except older WebKit-based ones, like Safari (bug 5991 ), where we should use document.body instead of document.documentElement .

Luckily, we don’t have to remember these peculiarities at all, because the scroll is available in the special properties, window.pageXOffset/pageYOffset :

These properties are read-only.

For historical reasons, both properties exist, but they are the same:

window.pageXOffset is an alias of window.scrollX .
window.pageYOffset is an alias of window.scrollY .

Scrolling: scrollTo, scrollBy, scrollIntoView

To scroll the page with JavaScript, its DOM must be fully built.

For instance, if we try to scroll the page with a script in <head> , it won’t work.

Regular elements can be scrolled by changing scrollTop/scrollLeft .

We can do the same for the page using document.documentElement.scrollTop/scrollLeft (except Safari, where document.body.scrollTop/Left should be used instead).

Alternatively, there’s a simpler, universal solution: special methods window.scrollBy(x,y) and window.scrollTo(pageX,pageY) .

The method scrollBy(x,y) scrolls the page relative to its current position . For instance, scrollBy(0,10) scrolls the page 10px down.

The button below demonstrates this:

window.scrollBy(0,10)

The method scrollTo(pageX,pageY) scrolls the page to absolute coordinates , so that the top-left corner of the visible part has coordinates (pageX, pageY) relative to the document’s top-left corner. It’s like setting scrollLeft/scrollTop .

To scroll to the very beginning, we can use scrollTo(0,0) .

window.scrollTo(0,0)

These methods work for all browsers the same way.

scrollIntoView

For completeness, let’s cover one more method: elem.scrollIntoView(top) .

The call to elem.scrollIntoView(top) scrolls the page to make elem visible. It has one argument:

If top=true (that’s the default), then the page will be scrolled to make elem appear on the top of the window. The upper edge of the element will be aligned with the window top.
If top=false , then the page scrolls to make elem appear at the bottom. The bottom edge of the element will be aligned with the window bottom.

The button below scrolls the page to position itself at the window top:

this.scrollIntoView()

And this button scrolls the page to position itself at the bottom:

this.scrollIntoView(false)

Forbid the scrolling

Sometimes we need to make the document “unscrollable”. For instance, when we need to cover the page with a large message requiring immediate attention, and we want the visitor to interact with that message, not with the document.

To make the document unscrollable, it’s enough to set document.body.style.overflow = "hidden" . The page will “freeze” at its current scroll position.

document.body.style.overflow = ‘hidden’

document.body.style.overflow = ‘’

The first button freezes the scroll, while the second one releases it.

We can use the same technique to freeze the scroll for other elements, not just for document.body .

The drawback of the method is that the scrollbar disappears. If it occupied some space, then that space is now free and the content “jumps” to fill it.

That looks a bit odd, but can be worked around if we compare clientWidth before and after the freeze. If it increased (the scrollbar disappeared), then add padding to document.body in place of the scrollbar to keep the content width the same.

Width/height of the visible part of the document (content area width/height): document.documentElement.clientWidth/clientHeight

Width/height of the whole document, with the scrolled out part:

Read the current scroll: window.pageYOffset/pageXOffset .

Change the current scroll:

window.scrollTo(pageX,pageY) – absolute coordinates,
window.scrollBy(x,y) – scroll relative the current place,
elem.scrollIntoView(top) – scroll to make elem visible (align with the top/bottom of the window).
If you have suggestions what to improve - please submit a GitHub issue or a pull request instead of commenting.
If you can't understand something in the article – please elaborate.
To insert few words of code, use the <code> tag, for several lines – wrap them in <pre> tag, for more than 10 lines – use a sandbox ( plnkr , jsbin , codepen …)

Lesson navigation

© 2007—2024 Ilya Kantor
about the project
terms of usage
privacy policy

JS Reference

Html events, html objects, other references, html dom element scrolltop.

Get the number of pixels the content of "myDIV" is scrolled:

Scroll the contents of "myDIV" TO 50 pixels horizontally and 10 pixels vertically:

Scroll the contents of "myDIV" BY 50 pixels horizontally and 10 pixels vertically:

More examples below.

Description

The scrollTop property sets or returns the number of pixels an element's content is scrolled vertically.

The scrollLeft Property

The CSS overflow Property

The onscroll Event

Return the scrollTop property:

Set the scrollTop property:

Property Values

Return value, more examples.

Scroll the contents of <body> by 30 pixels horizontally and 10 pixels vertically:

Toggle between class names on different scroll positions - When the user scrolls down 50 pixels from the top of the page, the class name "test" will be added to an element (and removed when scrolled up again):

Slide in an element when the user has scrolled down 350 pixels from the top of the page (add the slideUp class):

Browser Support

element.scrollTop is supported in all browsers:

COLOR PICKER

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail: [email protected]

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail: [email protected]

Scrolling Issues on Safari/Chrome iOS

Hi, I'm having issues with scrolling on iOS (web). I have a web app that when you click on different pill shaped menus scrolls to the appropriate/related element on the page. When I click a different pill menu when scrolling is happening I get glitches on iOS browsers (safari/chrome) whereas everything is fine on Chrome Android. The wanted behavior is that when you click on the pill the scrolling goes to the needed item with no glitching or pause. I use jQuery's animate to scroll to the needed element and the scroll listener to detect whether the page is at the right position to illuminate the right pill (make it active).

Is there any advice/recommendations to fix this issue?

For anybody having this issue or unnatural scrolling behavior, this css line on your body or concerned div should fix it: -webkit-overflow-scrolling: touch

iOS Safari window.scrollTo / getBoundingClientRect bug

On iOS safari, if you use window.scrollTo(0, y) and y is larger than document's maximum scroll , any immediate call to getBoundingClientRect will return incorrect top value. ( Same will happen for horizontal scroll and left value. )

Comments (1).

Menu and search

Saved searches

Use saved searches to filter your results more quickly.

To see all available qualifiers, see our documentation .

Notifications You must be signed in to change notification settings

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement . We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

document.body.scrollTop always returns 0 in Safari #2512

davision commented Jan 6, 2018 • edited by ghost

neonerd commented Jan 10, 2018

👍 17 reactions

Sorry, something went wrong.

davision commented Jan 10, 2018

lincenying commented Jan 17, 2018

👍 16 reactions

davision commented Jan 18, 2018

akkuan commented Feb 1, 2018

Davision commented feb 2, 2018.

👍 2 reactions

akkuan commented Feb 2, 2018

lock bot commented Nov 2, 2018

No branches or pull requests

Apple’s Worldwide Developers Conference to kick off June 10 at 10 a.m. PDT with Keynote address

The Keynote will be available to stream on apple.com , the Apple Developer app, the Apple TV app, and the Apple YouTube channel. On-demand playback will be available after the conclusion of the stream.

Looks like no one’s replied in a while. To start the conversation again, simply ask a new question.

Scrolling in Safari not working

Safari version 16.3 (18614.4.6.1.6) on macOS 13.2.1

After a few posts here on the Apple Support Communities - and only here, alas - it becomes impossible to scroll using Safari to the bottom of pages where fellow users have replied with more than about half a dozen posts.

The page loads, scrolls itself to the last/most recent post and then skips to the top.

The scroll bars become inactive and I have to use FireFox .

Is that a known bug, please?

iMac 27″, macOS 10.14

Posted on Feb 26, 2023 5:06 PM

How to use the Reader Mode in Safari on iPad

Reader Mode in Safari can help to simplify your reading experience.

Whatever your reasons may be, something about a website just may not jibe with your eyes, and that is precisely where Reader Mode on Safari comes in. Reader Mode makes getting past this issue a breeze and makes reading articles on your iPad much more pleasant.

How to use Reader Mode in Safari

Actually opening up Reader Mode is very simple, and quite literally requires just two taps. With any largely text-based web page open in Safari, you need only tap on the "Aa" icon in the left-hand side of your address bar. Once that's been tapped, you'll see the option to "Show Reader." Once you've tapped "Show Reader" the web page will convert into a succinct block of text with pictures intact.

Two iPads each showing different menus related to Reader Mode in Safari on an AppleInsider page

The "Show Reader" option is available on almost every primarily text-based web page. For websites like Instagram or Amazon, Reader Mode wouldn't do anything worthwhile for you even if you could enable it.

When entering Reader Mode, all the ads and suggested content from any given website will be stripped out in favor of a succinct reading experience. With that in mind, there are still some issues you can bump into. Some webpages, despite being mostly text, won't show up properly. In some instances this can be due to how the website is written, and in others it may just be that the text on the page is embedded within an image.

Another issue that can crop is multi-paged articles and how they "cooperate" with Reader Mode. For the most part, Reader Mode will only show you the first page of a multi-paged article when turned on. For these kinds of pages, you will have to turn Reader Mode on and off to progress through the article.

How to customize Reader Mode in Safari

Once you're in Reader Mode, you may find yourself wanting to make a few cosmetic adjustments. Doing so is as simple as returning to the menu you used to open Reader Mode. Once you have the menu opened up, you'll be greeted with a few key options, including:

Adjusting the font
Adjusting the font size
Changing the background color
Individual website settings

Three iPads showing three differently arranged Reader Mode pages

All of these options do exactly what it sounds like they would do. The individual website settings don't offer much that pertains to Reader Mode, but there is one absolutely game changing setting you can enable here.

That setting is "Use Reader Automatically." What this option will do is make it to where Safari automatically displays pages from that website in Reader Mode. Pages that can't normally be viewed in Reader Mode will still show up as normal, but the moment you enter a page that can be viewed in Reader Mode, the change will happen automatically.

With Reader Mode in your arsenal, you'll have a much better reading experience across the web on your iPad.

There are no Comments Here, Yet

Apple's best-selling 14-inch MacBook Pro M3 with 16GB RAM is back on sale for $1,599

WWDC unlikely to see debuts of any new hardware at all

Apple's iPhone 16 Pro could have world's thinnest bezels

Apple's new M2 iPad Air has a nine-core GPU, despite original claims to the contrary

iPhone Fold is on the way, but you're still going to have to wait a while

Bigger and brighter: iPhone 16 & iPhone 16 Pro rumored screen changes

Featured deals.

Apple's 16-inch MacBook Pro drops to all-time low price of $1,798

Killer deals: Apple TV 4K drops to $89.99, HomePod 2nd Gen dips to $175

Apple deals continue to pour in this June, with epic price drops on the Apple TV 4K and HomePod at Verizon. And you don't have to be a Verizon Wireless subscriber to snap up the bargains.

Apple updates iPadOS, but just to fix something on only the iPad 10

Apple has issued another update for iPadOS 17.5.1, but it's a release intended to fix something on the tenth-generation iPad.

Ahead of WWDC Developer app gets updated, YouTube gets keynote placeholder

Apple is gearing up for WWDC 2024 as it begins making all the expected preparations a week before its big event starts.

Nomad CEO Noah Dentzel talks MagSafe, Qi2, & Find My on HomeKit Insider

On this episode of the HomeKit Insider Podcast, Nomad co-founder and CEO Noah Dentzel joins to talk about MagSafe, Qi2, and Apple Find My.

Apple's latest MacBook Air with M3 chip, 16GB RAM drops to $1,149

The upgraded M3 MacBook Air is eligible for a fresh $150 price drop at Apple Authorized Reseller B&H Photo. M2 models, meanwhile, have fallen to as low as $829.

Apple may add Respiration Tracking to the Apple Vision Pro Mindfulness app

Code referring to "Respiration Tracking" in visionOS suggests that Apple is planning to further develop its Apple Vision Pro Mindfulness immersive meditation experience.

Daisy recycling robot now smashes iPhones for speed

Apple has shown off its Daisy robot for recycling iPhones before, but now it's become much faster by using brute force.

Crime blotter: California Apple Store theft suspects in court

In this week's roundup of Apple-related crime, a Man who burned down home over iPhone misunderstanding gets prison, iPhone scammers get arrested, and a man tracks his stolen AirPods Pro to Iraq.

Apple has quietly changed the M2 iPad Air's listed GPU core count from 10 cores to nine cores, and Metal benchmark testing suggests that the nine-core spec is accurate.

Latest Videos

Retro gold rush: which emulators are on the App Store, and what's coming

More Metal: Apple's iPad Pro Magic Keyboards, compared

iPad, iPad Air, iPad Pro buyer's guide May 2024: which iPad to buy for any budget

Latest reviews.

TerraMaster D8 Hybrid drive enclosure review: Lots of data, not enough bandwidth

Xencelabs Pen Display 16 review: A compact digital art masterpiece

Waterfield Shield Case for Apple Vision Pro review: Way better for travel than Apple's case

COMMENTS

javascript
I was facing this problem, I created this link at the bottom and implemented the jQuery scrollTop code and it worked perfectly in Firefox, IE, Opera but didn't work in Chrome and Safari.
javascript
I am calling this javascript on page load document.body.scrollTop = document.documentElement.scrollTop = 0; I want html page starts from top when loaded, above javascript working fine for chrome,
Safari JS scroll no longer works w…
Safari JS scroll no longer works with scroll-behavior. Hello, With the new version of Safari 15.4, the CSS property scroll-behavior: smooth will block the JS scroll on element.scrollTop = xx. The release note says scroll-behavior props will be supported by this new version, but it only blocks scrolls... If I remove the scroll-behavior CSS props ...
Workaround for Mobile Safari scrollTop() not updating during scroll
Workaround for Mobile Safari scrollTop () not updating during scroll. 20-Mar-2017. I've recently discovered that on Mobile Safari the $ (window).scrollTop () would not update during the scroll event animation. It appeared to only update after the scroll (the elastic scroll) had finished its animation. This was a rather annoying 'feature' for me ...
My scrollTop value is not working? scrollTop, offsetTop ...
scrollTop is an element property that gets or sets the top position (vertical scroll position) of the selected element. scrollTop measures the distance from a) the top of the element to b) the ...
jQuery scrollTop not working on Mobile Devices (iPhone, iPad, Android
Today is a nasty day, the day when we discovered that our beloved $ (selector).scrollTop (), a child method of $ (selector).animate (), is not working properly on mobile devices.
Element: scrollTop property
The Element.scrollTop property gets or sets the number of pixels that an element's content is scrolled vertically. An element's scrollTop value is a measurement of the distance from the element's top to its topmost visible content. When an element's content does not generate a vertical scrollbar, then its scrollTop value is 0. scrollTop can be ...
Scroll to top in Safari is not working on…
Scroll to top in Safari is not working on certain website. Hi, I know that tapping the top status bar bring me to the top of the page on safari, however it seems that on some website I usually visit, the scroll to top function is not working. The websites that I had this problem are : any wikipedia pages, any wikia pages, some wordpress blogs.
Window sizes and scrolling
For document scroll, document.documentElement.scrollLeft/scrollTop works in most browsers, except older WebKit-based ones, like Safari (bug 5991 ), where we should use document.body instead of document.documentElement.
jQuery scrollTop not working in Safari
I borrowed a script from Chris Coyier at CSS-Tricks that uses scrollTop to navigate, via vertical scroll, to various parts of the same page. This works properly using IE6+ and later versions of FF however, when I test it on Safari, there is no action whatsoever when the buttons are clicked, almost as if Safari is ignoring my JS.
HTML DOM Element scrollTop Property
Description The scrollTop property sets or returns the number of pixels an element's content is scrolled vertically. See Also: The scrollLeft Property The CSS overflow Property The onscroll Event
Scrolling Issues on Safari/Chrome …
Hi, I'm having issues with scrolling on iOS (web). I have a web app that when you click on different pill shaped menus scrolls to the appropriate/related element on the page. When I click a different pill menu when scrolling is happening I get glitches on iOS browsers (safari/chrome) whereas everything is fine on Chrome Android. The wanted behavior is that when you click on the pill the ...
iOS Safari window.scrollTo / getBoundingClientRect bug
On iOS safari, if you use window.scrollTo(0, y) and y is larger than document's maximum scroll, any immediate call to getBoundingClientRect will return incorrect top value. Same will happen for horizontal scroll and left value.
Lack of back/ scroll to top feature with new redesigned Safari ...
New overhauled Safari is really cool, it changes the way we use Safari for easily used with just one hand ant more consistent with Safari on macOS. But I cannot find the scroll to top feature in this update. This feature is really really handy, at least to me. It's so sad if useful feature like that is not available on iOS 15.
document.body.scrollTop always returns 0 in Safari #2512
Does anyone have an issue getting the scroll offset in Safari or iOS devices? This works perfectly in Firefox: this.scrollPosition = document.body.scrollTop but in Safari I'm always getting 0, no m...
Why does ScrollTop position not work on mobile Safari?
You can see it working on Chrome here. However it does not work on Safari, which includes mobile and tablet. The scroll position does not seem to change at all in the console. logos = document.querySelectorAll('.scroll-text'); setSizes(lockUpdate); // ensure initialization and prevent recursive call.
Arrow key scrolling broken in Safari 16.5…
Arrow key scrolling broken in Safari 16.5 (Ventura) As of recently, hitting arrow keys as described on this page: Keyboard shortcuts and gestures in Safari on Mac - Apple Support (UK) does not work as described on that page. That page says. as of now: > Scroll up, down, left or right: Press the arrow keys. However, pressing arrow keys does ...
Scrolling in Safari not working
After a few posts here on the Apple Support Communities - and only here, alas - it becomes impossible to scroll using Safari to the bottom of pages where fellow users have replied with more than about half a dozen posts.
$ (window).scrollTop () is not working in safari
Isn't the $ (window).scrollTop () supposed to be more browser campatible than the others?Anyway let me try and get back to you in a moment.
Scrolling in safari not working? : r/ios
On the iPhone's Safari browser you can do this by clicking the "Aa" icon in the top left where the browser search bar and in the drop down menu there should be an option. Hope that helps! This has been an issue for me for many months, and deactiving content blockers doesn't do any difference.
How to use Safari's Reader Mode on iPad
Whether it be ads or shoddy formatting, some web pages might not be that easy to decipher. Thankfully, there is a solution built right into Safari on your iPad.
javascript
3. scrollTo is a property of window object. And you are trying to apply it on an element. Use element.scrollTop. Code Snippet. document.querySelector ('ol').scrollTop = 100; It will do the trick! For more information on scrollTo & scrollTop, refer Mozilla/Window/scrollTo & Mozilla/Element/scrollTop respectively. NOTE.