Fixing Smooth Scroll Behavior Issue in Elementor WordPress on IOS Safari

Dimas Maulana Development

03-08-2021

Contents

Smooth scrolling is a popular web design feature that enhances user experience by creating a fluid transition when navigating through a web page. However, there are instances where smooth scrolling might not work as expected, especially on specific platforms or browsers. This article addresses the issue of smooth scroll behavior not working in Elementor WordPress on iOS Safari and provides a solution using the smoothscroll-polyfill library.

Identifying the Issue

Smooth scrolling can sometimes behave inconsistently across different browsers and devices. One common issue is when smooth scroll doesn’t work on iOS Safari when using the Elementor page builder in WordPress. Users may notice a lack of smooth animation when scrolling, which can impact the overall user experience of the website.

The Solution: Using smoothscroll-polyfill

To address the smooth scroll behavior issue on iOS Safari while using Elementor in WordPress, we can integrate the smoothscroll-polyfill library into the website. This library provides a consistent and smooth scrolling experience across various browsers, including those that do not natively support smooth scrolling.

Follow these steps to implement the solution:

Access Your WordPress Dashboard: Log in to your WordPress admin panel.
Edit the Desired Page with Elementor: Locate the page where you want to enable smooth scrolling using Elementor and click on the “Edit with Elementor” button.
Add a New Section for Custom Scripts: Within the Elementor editor, add a new section where you can insert the custom scripts. To do this, click on the “+” icon to add a new section.

Add the smoothscroll-polyfill Script: Inside the newly added section, add an HTML widget. Then, paste the following code into the HTML widget to include the smoothscroll-polyfill script.

1
2
3
4
5
6
7


<script defer src="https://unpkg.com/[email protected]/dist/smoothscroll.min.js"></script>
<script>
  // Run smoothscroll-polyfill when the page is fully loaded
  window.addEventListener('load', function() {
    smoothscroll.polyfill();
  });
</script>

Update and Save: After adding the script, click the “Update” or “Save” button to save your changes.
Preview and Test: To ensure that the smooth scroll behavior is working as expected, you can preview the page or view it live. Open the page on an iOS Safari browser and test the scrolling behavior.

Conclusion

By following these steps and integrating the smoothscroll-polyfill library into your Elementor-powered WordPress website, you can address the issue of smooth scroll behavior not working on iOS Safari. This solution provides a consistent and smooth scrolling experience for all visitors, enhancing the overall usability and appeal of your website.

Smooth scrolling is a valuable feature that contributes to a seamless and enjoyable browsing experience. With the help of the smoothscroll-polyfill library, you can ensure that your Elementor WordPress site delivers a smooth and engaging experience to users, regardless of the browser or device they are using.