safari window.scrollto not working

You can make a difference in the Apple Support Community!

When you  sign up with your Apple ID , you can provide valuable feedback to other community members by  upvoting helpful replies and User Tips .

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

Similar questions

• Safari unusably choppy scrolling after upgrade to macOS 12.1 Hi, Ever since I upgraded to macOS 12.1, Safari (15.2) is basically unusuable. It often takes anywhere between half a second and a full second until scrolling has any effect, regardless of whether I use the mouse or the keyboard. I don't use any extensions. CPU and memory usage is normal. I tried deleting all history and site data to no avail. It doesn't seem to matter what site I'm on. Has anyone seen this and found a solution? 832 2
• Safari scrolling is not smooth When browsing websites (any website) on Safari, the scrolling with trackpad / mouse / scrollbar is not smooth. There is a noticeable stutter. This does not happen when using Chrome, where the scrolling is buttery smooth. Is this normal behaviour, or is there something that can be done to fix this? I am running Safari 14.0.2, on Big Sur 11.1 (latest update), on a MacBook Pro (13-inch, 2020, Four Thunderbolt 3 ports) with Intel Core i7 Quad-Core. This problem has been persistent through multiple versions of Safari and OS. 937 2
• scroll doesn't work in safari on some pages On some webpages, I cannot scroll down. The only thing I can see is as much of the page as fits in the window. If I make the window smaller, or zoom out via CMD -, the part of the page that can be seen in the window changes but I still can't scroll past what's in the window. Basically the page doesn't scroll. Here is the latest webpage I've had the problem with: https://www.ebay.de/sch/i.html?_from=R40&_trksid=p2380057.m570.l1313.TR12.TRC2.A0.H0.Xfalten+schreibmaschine.TRS0&_nkw=falten+schreibmaschine&_sacat=0 I searched on here for someone having the same issue and I only found one from 14 years ago. No one responded so no luck there. I am running Mojave on a Macbook Air 2012. Thank you. Noah 896 2

Loading page content

Page content loaded

Feb 28, 2023 3:35 PM in response to Vilas_S

Thank you, Vilas_S , for your suggestions.

I can confirm that I have tried each and all of these.

I should also point out again, please, that this only happens here on the Apple Support Communities pages, and no other site at all!

And only with Safari . Firefox works perfectly every time.

The failure-to-allow-scrolling-bug only appears when there are several replies … this page, for instance, the page we are on now, has scroll bars occupying almost three fifths of the vertical space of this open window.

But I can guarantee that if a few more people reply, so that I need to scroll further, I shall be prevented from scrolling and the scroll bar will become inoperative.

A Private Window is the only way I can view down to the bottom of such pages.

I believe this needs to be escalated to the engineers working with Safari (16.3 (18614.4.6.1.6) on macOS 13.2.1). Thanks!

Feb 28, 2023 3:22 PM in response to Mark Sealey

Hello Mark Sealey,

Thank you for using Apple Support Communities. We'd like to help out and recommend some troubleshooting steps you can try. Let's start off by following the steps listed here: If Safari on Mac doesn't open a webpage or isn’t working as expected - Apple Support

1.) Reload the page.

2.) Check Safari extensions .

3.) Check Safari settings by going to Safari > Settings. Review Privacy , Website and Security settings .

4.) Test with a private window .

5.) Check VPN or other security software .

Another step we recommend you try is to test this issue in safe mode. This step can help isolate possible software related issues: How to use safe mode on your Mac - Apple Support

Apple silicon

1.) Shut down your Mac.

2.) Turn on your Mac and continue to press and hold the power button until you see the startup options window.

3.) Select your startup disk, then press and hold the Shift key while clicking “Continue in Safe Mode.”

4.) Log in to your Mac. You might be asked to log in again.

Intel processor

1.) Turn on or restart your Mac, then immediately press and hold the Shift key as your Mac starts up.

2.) Release the key when you see the login window, then log in to your Mac. 

3.) You might be asked to log in again. On either the first or second login window, you should see ”Safe Boot” in the upper-right corner of the window.

Depending on your results, follow the steps under “If the issue continues in safe mode” or “If the issue doesn't continue in safe mode”.

Feel free to keep us posted on your results. Thank you for using Apple Support Communities.

Feb 28, 2023 3:46 PM in response to Mark Sealey

Hi Mark Sealey,

If you have been able to follow all provided steps with this behavior continuing, it would be best to contact Apple to have them investigate this for a solution.

Contact - Official Apple Support

Feb 28, 2023 4:47 PM in response to ASTRO24

Will do. Thanks.

Instantly share code, notes, and snippets.

leereamsnyder / jquery.restoreIOSscrollTo.js

• Download ZIP
• Star ( 1 ) 1 You must be signed in to star a gist
• Fork ( 0 ) 0 You must be signed in to fork a gist
• Embed Embed this gist in your website.
• Share Copy sharable link for this gist.
• Clone via HTTPS Clone using the web URL.
• Learn more about clone URLs
• Save leereamsnyder/33504ae18b58d25646b6 to your computer and use it in GitHub Desktop.

Safari JS scroll no longer works with scroll-behavior

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, the scroll will work correctly, but of course with no animation. How to scroll with scrollTop but with smooth transition ? There is the good place to report bugs to Safari developers ?

element.scrollTo has had its operation change in 15.4 as well.

Under 15.3, I could use a polyfill with scroll-behavior: smooth to scroll horizontally in a container with overflowx: hidden . Now with 15.4, I can't achieve that with or without a polyfill.

My experimentation has found 2 disappointing almost-solutions but neither gets you back to the functionality you could achieve with a polyfill in 15.3.

The options at present:

• The method you described: set the scroll-behavior to auto and get instant scroll with no scrollbar.
• If I set overflowx: auto , then scroll-behavior: smooth works as documented. If it's overflowx: hidden I get no movement at all.

Neither one is great, and I really do hope this is a bug.

(P.S. sorry to pile on your bug with something that's only mostly related - you're the only other person I've found talking about this and I'm so glad it's not just me).

Count me as one more person very interested in this!

Luckily, the bug is already being tracked here: https://bugs.webkit.org/show_bug.cgi?id=238497

In the mean time, a (very annoying) workaround may look like this:

There are obviously more robust ways to accomplish this (e.g. throttled onScroll watcher to re-apply the hidden style), but this gets the job done at least.

Alternatively, if it works with your UI, you can simply apply a pointer-events: none on the scrolling element to prevent the user from interacting with it.

I can confirm that this is still an issue. adam_miller 's response is the only real option I have at the moment.

I hope this gets resolved soon.

This is still occurring in iOS 16.2 despite the 'Resolved / Fixed;' status on the bug tracker : https://bugs.webkit.org/show_bug.cgi?id=238497

ie: having scroll-behavior: smooth in CSS disables the ability to programatically scroll the window.

Removing that CSS makes it work again.

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. )

Related Posts

Comments (1).

Menu and search

• Skip to main content
• Skip to search
• Skip to select language
• Sign up for free

Element: scrollTo() method

The scrollTo() method of the Element interface scrolls to a particular set of coordinates inside a given element.

• x-coord is the pixel along the horizontal axis of the element that you want displayed in the upper left.
• y-coord is the pixel along the vertical axis of the element that you want displayed in the upper left.

A dictionary containing the following parameters:

Specifies the number of pixels along the Y axis to scroll the window or element.

Specifies the number of pixels along the X axis to scroll the window or element.

Determines whether scrolling is instant or animates smoothly. This option is a string which must take one of the following values:

• smooth : scrolling should animate smoothly
• instant : scrolling should happen instantly in a single jump
• auto : scroll behavior is determined by the computed value of scroll-behavior

Return value

None ( undefined ).

Using options :

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).

Lesson navigation

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

DEV Community

Discussion on: react component to smooth scroll to the top.

• Email [email protected]
• Location Ho Chi Minh, Vietnam
• Joined Jul 22, 2020

not working on safari browser. can u fix it?

• Location Toronto
• Education Memorial Univeristy of Newfoundland
• Work Software Dev @ Isle of Code
• Joined Mar 1, 2021

Since I use Chrome and Firefox, I didn't know it doesn't work on Safari.

This post on Stack Overflow has some suggestions you might find helpful. stackoverflow.com/questions/560112...

helpful ! thank bro

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink .

Hide child comments as well

For further actions, you may consider blocking this person and/or reporting abuse

We're a place where coders share, stay up-to-date and grow their careers.

Enable Smooth Scrolling with JavaScript

A third-party library used to be required to accomplish simple effects like a smooth scrolling with JavaScript. Those days are history now that JavaScript supports this feature across almost all modern browsers with the built-in window.scrollTo() method.

Why Use Smooth Scrolling?

Put yourself in the user's position. You click on a web page element, only to find that the screen has suddenly changed and you don't know what happened or where you are. This abrupt change can be confusing to many users.

Enter smooth scrolling, which JavaScript provides seamlessly. Think of it as a guide. The animation guides you to the desired spot after clicking on a web page element. So now you know where you are and how you arrived there. Overall, it provides a more pleasant and user-friendly experience.

While smooth scrolling is a great feature to have, it can also be easily abused. Make sure that you're not putting auto-scroll features all over your site where your users wouldn't expect to have it. Clicking a menu option or button to take a user to a different part of the current page is ideal, but setting auto-scrolls throughout the site to lure them to other places they wouldn't expect is not.

How to Animate Scrolling with JavaScript

You're probably already familiar with creating a scroll that automatically jumps to a specific location within a webpage:

The above snippet jumps the user down 1,000 pixels vertically from the top of the web page, just without the animation.

Create a smooth scrolling animation with the following JavaScript syntax:

The second snippet provides the same result as the first, except this time it animates down 1,000 pixels vertically from the top of the web page.

Incremental Scroll

There may be times where you don't want to scroll to a specific Y position on a web page, but you want to scroll up or down an exact pixel amount.

This is known as incremental scrolling , which you can accomplish this with JavaScript's window.scrollBy() method:

Scroll to the Top of the Page

You can scroll to the top of the page by setting the "top" attribute to 0, the first Y position in an HTML page:

Scroll to the Bottom of the Page

Similarly, you can scroll to the bottom of the page by retrieving the window's inner height:

Scroll to a DOM Element

This option creates an automatic smooth scrolling animation to an element within the DOM:

This piece of code looks for the DOM element with ID orangeable , then scrolls to the top portion of that element until it's in view.

Scrolling Behaviors

There are only two available behavior methods for smooth scrolling with JavaScript:

• smooth : The scrolling animates smoothly.
• auto : The scrolling happens in a single jump.

If you want to jump scroll, you can save yourself the extra code and use the window.scrollTo() method with X and Y values that we discussed earlier.

Browser Support

Smooth scrolling is available for use in most modern browsers. Unfortunately for Apple users, Safari does not support his feature yet, however, there is a polyfill option available that will fill the gap and provide the functionality you're looking for.

Give smooth scrolling a shot in your next project! It's great fun to work with, extremely easy to implement, and provides a better overall experience for your users.

There are no comments yet. Start the conversation!

Add A Comment

More javascript.

• Claris FileMaker
• Claris Connect
• Claris Studio
• Claris Engage
• Claris Community Live
• Report a Product Issue
• Claris Community Announcements and Questions
• Business discussions
• Partner Product Announcements
• Claris Product Backlog
• Connector Backlog
• Claris Marketing Backlog
• Updates & Release Notes
• Knowledge Base
• Documentation
• Marketplace Apps
• Claris Academy
• Claris Certifications
• Engineering Blogs
• Claris Blogs
• Expert-led Live Training
• Welcome to the Community
• Community Events
• Special Interest Groups
•  Partner Community

AnatoleBeams (Partner) asked a question.

I have a database that plots items on a map by feeding JavaScript code into a WebViewer. It all works nicely in FileMaker Pro and also on WebDirect. When you conduct a search for a specific item, the system highlights the item on the map and scrolls the map (which is larger than the webviewer) to centre it. This last step works using the window.scrollto function in JavaScript but it fails to work on any iOS device over WebDirect. I understand from my searches on the internet that it is a common problem, but the simple fixes they suggest don't seem to have any effect (using setTimeout).

This javascript function works perfectly on Mac and PC platforms, but it stubbornly refuse to scroll on any iOS device.

• function scrollWin ( ctx ) {
• window . scrollto (( XSobject * " & Map_zoom_x & " ) - " & Xwindow/2 & " , ( YSobject * " & Map_zoom_y & " ) - " & Ywindow/2 & " );

or this version using setTimeout:

function scrollWin(ctx) {

window.setTimeout( function() {window.scroll((XSobject * " & Map_zoom_x & ") - " & Xwindow/2 & ", (YSobject * " & Map_zoom_y & ") - " & Ywindow/2 & ");}

Does anyone have any ideas how I might be able to get this function to work on iOS devices too? The rest of the scripting plots a map and this final step should scroll the window to the location on the map, so it is pretty essential. However, any iOS device ignores it and shows the map at the origin.

I have tried embedding it in a setTimeout but that doesn't help either. window.scroll does the same thing.

I do understand that this is more a JavaScript issue and I am also investigating this through a JavaScript forum, but I thought it would be valid here too. I will cross-post any answers I get from either forums.

Many thanks for any pointers anyone might have with this. Anatole

mikebeargie (Partner)

I believe you have to modify the javascript action so it takes effect onfocus instead of onload.

A webviewer can't be scrolled without being the active object (if I recall correctly), so you might need to add an onfocus action for the scrolling, and script filemaker to activate the webviewer using go to object.

AnatoleBeams (Partner)

Brilliant - that sounds plausible. I will give it a try and post up any results.

Thanks very much for helpful pointer.

As far as I can tell that doesn't seem to do anything. I have tried onFocus, Event.observe, window.setTimeout, window.focus, window.addEventListener, but nothing seems to help.

The thing is the process works perfectly in Safari - the map draws and then scrolls to the desired location. In iOS the map draws and shows at the origin, ignoring the scrollto function. I have tried adding various delays in case it is a timing issue. I have tried selecting the web viewer as an active object. Slowing the layout draw and web viewer draw in FileMaker, and using setTimeout to delay the web viewer. The effects are noticeable in Safari, but the scroll in iOS is still ignored.

There are a number of problems highlighted on the web regarding the scrollto function and iOS, but nothing that seems to fix this specific application.

Related Questions

Trending articles.

• Claris FileMaker 2024 Technical Specifications
• Claris FileMaker 2023 Technical Specifications
• FileMaker Pro Installation and Trial Conversion using a License Certificate
• Preparing to upgrade to the latest Claris FileMaker version
• FileMaker Server operating system requirements - all versions

Register Today

September 5, 8:00 a.m. PT, Back to school: JSON building blocks

September 22, 8:00 a.m. PT, Back to school: Transactions in Claris FileMaker (coming soon)

Watch recordings >

Discussion Topics

Learn & build, programs & groups.

• Find a Partner
• Ask an Expert
• Become a Partner
• Partner Community

This site contains user submitted content, comments and opinions and is for informational purposes only. Claris may provide or recommend responses as a possible solution based on the information provided; every potential issue may involve several factors not detailed in the conversations captured in an electronic forum and Claris can therefore provide no guarantee as to the efficiency of any proposed solutions on the community forums. Claris disclaims any and all liability for the acts, omissions and conduct of any third parties in connection with or related to your use of the site. All postings and use of the content on this site are subject to the Claris Community Use Agreement.

• Copyright © 2024, Claris International Inc.
• Terms of Use
• Privacy Policy
• 日本の Claris コミュニティに行く

SOLVED: Smooth scroll does not seem to work in Safari

Bricks Version : 1.3.4 Browser : Safari 14.1.1 OS : macOS URL : https://ho.maarevenonline.nl

I am creating a one page website (see url) but the smooth scrolling does not work in Safari. Is there a workaround or fix for this?

Hello @barthusz ,

Bricks handles the smooth scrolling using the Element.scrollIntoView() method. Unfortunately, the smooth option is not supported by Safari ( Element.scrollIntoView() - Web APIs | MDN ).

A workaround to this could be to use a polyfill, like the one described here .

Maybe you also know the solution for my other question? Background video does not autoplay in Chrome

Hi @barthusz Could you tell how you achieve Element.scrollIntoView() method in safari. We should follow only via script method ? Please tell that things.

I tried this method and the scrolling is clunky. Is there another method? We need cross browser compability. Not solved.

Hi, have you tried the poly fill workaround mentioned by Luis?

Hi @iamstmvasan I followed the workaround @luistinygod suggested. Just follow the link!

window api: scrollto

Window api: scrollto: `options.behavior` parameter, window api: scrollto: `options.left` parameter, window api: scrollto: `options.top` parameter.

• | New Account
• | Log In Remember [x]
• | Forgot Password Login: [x]
• Format For Printing
•  -  XML
•  -  Clone This Bug
•  -  Top of page