Smooth Scroll behavior polyfill. The Scroll Behavior specification has been introduced as an extension of the Window interface to allow for the developer to opt in to native smooth scrolling. To date this has only been implemented in Chrome, Firefox and Opera. I am currently running OSX 10.9.3 and Safari Version 7.0.4. When using Mozilla Firefox or Google Chrome, I am able to scroll using the mouse wheel just fine. But with Safari, it does not work.
The ScrollToOptions dictionary of the CSSOM View spec contains properties specifying where an element should be scrolled to, and whether the scrolling should be smooth.
A ScrollToOptions dictionary can be provided as a parameter for the following methods:
Properties
ScrollToOptions.top- Specifies the number of pixels along the Y axis to scroll the window or element.
ScrollToOptions.left- Specifies the number of pixels along the X axis to scroll the window or element.
ScrollToOptions.behavior- Specifies whether the scrolling should animate smoothly, or happen instantly in a single jump. This is actually defined on the
ScrollOptionsdictionary, which is implemented byScrollToOptions.
Examples
In our scrolltooptions example (see it live) we include a form that allows the user to enter three values — two numbers representing the left and top properties (i.e. the positions to scroll to along the X and Y axes), and a checkbox indicating whether they want smooth scrolling enabled or not.
When the form is submitted, an event handler is run that puts the entered values into a ScrollToOptions dictionary, and then invokes the Window.ScrollTo() method, passing the dictionary as a parameter:
Specifications
Specifications
Safari Smooth Scroll
| Specification | Status | Comment |
|---|---|---|
| CSS Object Model (CSSOM) View Module The definition of 'ScrollToOptions' in that specification. | Working Draft |
Browser compatibility
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | Android webview | Chrome for Android | Firefox for Android | Opera for Android | Safari on iOS | Samsung Internet | |
ScrollToOptions | ChromeFull support 45 | EdgeFull support 79 | FirefoxFull support Yes | IENo support No | OperaFull support 32 | SafariFull support Yes | WebView AndroidFull support 45 | Chrome AndroidFull support 45 | Firefox AndroidFull support Yes | Opera AndroidFull support 32 | Safari iOSFull support Yes | Samsung Internet AndroidFull support 5.0 |
behavior | ChromeFull support 45 | EdgeFull support 79 | FirefoxFull support Yes | IENo support No | OperaFull support 32 | SafariFull support Yes
| WebView AndroidFull support 45 | Chrome AndroidFull support 45 | Firefox AndroidFull support Yes | Opera AndroidFull support 32 | Safari iOSFull support Yes
| Samsung Internet AndroidFull support 5.0 |
left | ChromeFull support 45 | EdgeFull support 79 | FirefoxFull support Yes | IENo support No | OperaFull support 32 | SafariFull support Yes | WebView AndroidFull support 45 | Chrome AndroidFull support 45 | Firefox AndroidFull support Yes | Opera AndroidFull support 32 | Safari iOSFull support Yes | Samsung Internet AndroidFull support 5.0 |
top | ChromeFull support 45 | EdgeFull support 79 | FirefoxFull support Yes | IENo support No | OperaFull support 32 | SafariFull support Yes | WebView AndroidFull support 45 | Chrome AndroidFull support 45 | Firefox AndroidFull support Yes | Opera AndroidFull support 32 | Safari iOSFull support Yes | Samsung Internet AndroidFull support 5.0 |
Legend
- Full support
- Full support
- No support
- No support
- See implementation notes.
- See implementation notes.
Safari Smooth Scrolling
I am a web developer and I have run into a really weird issue with a client site. When I view the site on windows desktop it operates correctly but the client on a mac is telling me that on some pages, after they have scrolled to the bottom of the webpage, that when they scroll back up to the top of the webpage they are not able to get back to the complete top of the page and instead it stops them from scrolling anymore when they are 100-200 pixels from the actual top of the page so it is cutting off the top of the page content when they try to get back to the top. I do not have a desktop mac but I tried some online mac with safari emulators and I still can't see the problem, but the client has several people on macs that have this problem. The webpage loads just fine but after visiting the bottom and coming back to the top it won't go to the full top of the page. I have never had this issue with a website before and I am wondering if anyone can duplicate this problem on their mac and also if anyone has any idea what is causing it and how to fix it.
Here is a webpage on the site that the client says has this problem:
Safari Smooth Scroll
MacBook Pro with Retina display, macOS High Sierra (10.13), 15' MacBook pro 2017, safari 11.0.1
Mouse Scroll Not Smooth
Posted on
