As I develop a one-page portfolio with top-mounted navigation controlled by href links, I have incorporated scroll-behavior: smooth; in the CSS to ensure seamless and pleasing scrolling in Chrome. However, when accessed via Safari, this feature is not retained, resulting in instant navigation. Is there an equivalent functionality in Safari that mimics this CSS property?
Safari lacks compatibility with the CSS property scroll-behavior: smooth, necessitating the use of custom JavaScript for a similar outcome. For more information, check out this resource: Javascript - window.scroll({ behavior: 'smooth' }) not working in Safari
Exciting new feature alert! Safari 15.4 now includes CSS scroll-behavior support, as outlined in the release notes for version 15.4.
This update introduces compatibility with the CSS scroll-behavior property and ScrollOptions, enabling seamless scrolling to anchors or via JavaScript.
2022 Update
The issue with Safari support for smooth-scroll persists, and unfortunately, it remains non-customizable.
If you're in search of a simple solution to activate it, feel free to explore the API that has been under construction for the last 4 years: https://github.com/CristianDavideConte/universalSmoothScroll.
It's incredibly efficient, user-friendly, and it brings smooth-scroll functionality to virtually all browsers except IE, offering extensive customization options (like easing, duration, interruptibility, etc...).
Below is an example showcasing how you can utilize the API to quickly implement smooth-scroll on your website:
Starting from UniversalSmoothScroll 6.0.0, the Ease-Functions library has transitioned into a module, prompting an update to this answer for compatibility with stackoverflow.
The challenge arises because stackoverflow does not accommodate modules in JavaScript snippets. Nonetheless, there exists a workaround to facilitate its usage; however, in a standard website context, this requirement is irrelevant.
/*
* In this example we will only customize the document's scrolling,
* but the API fully supports every custom scrollable container
*/
function init() {
/*
* We inform the API which element controls document scrolling
* (useful for scenarios like the body element, a custom container,
* a framework-specific container, etc...)
*/
uss.setPageScroller(window);
/**
* This API function enables anchors'
* smooth-scrolling to their respective sections
*/
uss.hrefSetup();
/**
* This API function sets the easing of the pageScroller (that we set to window) to a
* medium speed(the "QUART" part) ease-in-out function that lasts exactly 1 second.
*/
uss.setStepLengthCalculator(EASE_IN_OUT_QUART(1000));
/**
* This API function allows us to stop the scrolling within a container.
* In this case, we want scrolling to cease
* if the user navigates the document via mousewheel.
*/
window.addEventListener(
"wheel",
() => uss.stopScrolling(window)
);
}
/*
* IGNORE THIS SECTION.
* It pertains to the stackoverflow workaround for module support.
* Essentially, it loads the init function when the document finishes loading and the module is imported.
* For more details, refer to this discussion: https://meta.stackoverflow.com/questions/389108/support-javascript-es6-modules-in-code-snippets
*/
document.addEventListener("readystatechange", () => document.readyState === "complete" && init());/* Purely stylistic; unnecessary for the API */
html, body {
margin: 0;
}
nav {
display: flex;
justify-content: center;
position: fixed;
margin-top: 0;
width: 100vw;
}
nav > a {
display: flex;
align-items: center;
justify-content: center;
color: white;
text-decoration: none;
height: 20vh;
width: 15vw;
background: rgba(20,20,20,0.5);
transition: all 0.3s;
}
nav > a:hover {
background: rgba(20,20,20,0.6);
}
.horizontal-container {
display:flex;
}
.page {
width: 100vw;
height: 100vh;
flex-shrink: 0;
}
#to1 {
background: linear-gradient(135deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 0%, rgba(0,212,255,1) 100%);
}
#to2 {
background: linear-gradient(225deg, rgba(121,9,9,1) 0%, rgba(255,42,0,1) 100%);
}
#to3 {
background: linear-gradient(45deg, rgba(227,176,7,1) 0%, rgba(255,239,0,1) 100%);
}
#to4 {
background: linear-gradient(315deg, rgba(7,101,6,1) 0%, rgba(0,255,98,1) 100%);
}<html>
<head>
<!-- Integrate the API -->
<script src = "https://cdn.jsdelivr.net/npm/universalsmoothscroll@latest/universalsmoothscroll-min.js"></script>
<!-- Include the API's easing library (optional) -->
<script src = "https://cdn.jsdelivr.net/npm/universalsmoothscroll@latest/universalsmoothscroll-ease-functions-min.js" type = "module"></script>
<!--
DISREGARD THIS PART.
Aids the stackoverflow workaround for module functionality.
Imports the module and converts the import into a global variable.
Refer to this discussion for further insights: https://meta.stackoverflow.com/questions/389108/support-javascript-es6-modules-in-code-snippets
-->
<script type = "module">
import {EASE_IN_OUT_QUART} from "https://cdn.jsdelivr.net/npm/universalsmoothscroll@latest/universalsmoothscroll-ease-functions-min.js";
window.EASE_IN_OUT_QUART = EASE_IN_OUT_QUART;
</script>
</head>
<body>
<nav> <!-- header -->
<a href="#to1"><p>Blue</p></a>
<a href="#to2"><p>Red</p></a>
<a href="#to3"><p>Yellow</p></a>
<a href="#to4"><p>Green</p></a>
</nav>
<!-- Website pages -->
<div class="horizontal-container">
<div id="to1" class="page"></div>
<div id="to2" class="page"></div>
</div>
<div class="horizontal-container">
<div id="to3" class="page"></div>
<div id="to4" class="page"></div>
</div>
</body>
</html>Additional examples of usage are available at: this answer and the official playground or my website.
As per the feedback from elmcrest, it appears to be functioning correctly.
<script defer src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c8bba5a7a7bca0bbabbaa7a4a4e5b8a7a4b1aea1a4a488f8e6fce6fc">[email protected]</a>/dist/smoothscroll.min.js"></script>
To address the issue, follow these steps:
Using jQuery to smoothly scroll to the top of the page:
jQuery('html, body').animate({
scrollTop: $('html').offset().top,
}, 800)
When working with jQuery, you can achieve a smooth scrolling effect similar to "scroll-behavior: smooth".
Give this code snippet a try:
$('html, body').animate({
scrollTop: 0
}, 1500);
Feel free to adjust the scroll position to your preferred location.
$('a[href*="#"]').not('[href="#"]').not('[href="#0"]').click(function (t) {
if (location.pathname.replace(/^\//, "") == this.pathname.replace(/^\//, "") && location.hostname == this.hostname) {
var e = $(this.hash);
e = e.length ? e : $("[name=" + this.hash.slice(1) + "]"), e.length && (t.preventDefault(), $("html, body").animate({
scrollTop: e.offset().top
}, 600, function () {
var t = $(e);
if (t.focus(), t.is(":focus")) return !1;
t.attr("tabindex", "-1"), t.focus()
}))
}
});Despite claims that Safari supports smooth scrolling as mentioned here, the example provided does not function correctly on Safari.
To address this issue, I discovered a library with polyfills that can be used to replace the functionality in browsers where it doesn't work - https://github.com/iamdustan/smoothscroll
I am attempting to apply a watermark (string) with some opacity (css attribute) to both an image and a pdf using itext. For the pdf, I can simply use: PdfGState gstate = new PdfGState(); gstate.FillOpacity = textOpacity; Everything works fine. However, ...
Could someone kindly explain what's incorrect with this? .container { margin-top: 10px; } <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <div class="panel panel-primary"> <d ...
I'm relatively new to React and still trying to wrap my head around the component's lifecycle. However, the issue at hand is proving to be quite perplexing. One thing that confuses me is why adding "setState(10);" causes the style of the "Test" ...
In my design, I am using links in a list to create tabs for responsiveness. The issue arises when the width is reduced; instead of the last tab wrapping onto the next line, I want the text within the link itself to wrap. Setting the max-width to be 33% wo ...
I've been working on developing a web app with a focus on mobile-first design. When I scale down my Chrome window, everything looks responsive and functions well, adjusting objects to fit the smaller screen size. However, I noticed that when I switch ...
I currently have 3 different .less files (1file.less, 2file.less, 3file.less) that I want to combine into a single file called base.less. To import these files into base.less, I am using the @import "1file.less" method. However, upon inspecting the pa ...
In my project, I have implemented CSS modules which allow me to use multiple classes. The variable open is a boolean that determines whether or not the Paper should shift. <Paper className={`${classes.paper} ${open && classes.paperShift}`}> Questio ...
Currently, I am experimenting with a layering technique in HTML/CSS. The idea is to place an image behind a video to enhance the overall look of the video section. Here is a sample photoshop mockup that demonstrates what I am aiming for: HTML div id= " ...
I've managed to create a functioning jsfiddle example with the following JavaScript code: $(".blah").on('click', function () { $(this).removeClass('col-md-9'); $(this).toggleClass('col-md-3 col-md-9'); $(& ...
I'm having trouble with the white space on the right side of a website I created using Bootstrap. No matter what I try, it just won't go away. If you have any solutions, please share them with me. <!doctype html> <html lang="en" ...
While exploring a tutorial from CSS Tricks about animating section height, I came across a solution that I would like to implement in my Angular 2 application. Here is the function responsible for expanding sections in my app: expandSection(element) { / ...
Trying to create rounded corners for a div to mask its children's content led me to a solution I found in this question. However, it appears that the solution does not work when the children elements are transformed. The following http://jsfiddle.net ...
I am working with an image that contains multiple flag images: https://i.stack.imgur.com/xg0iM.jpg I have a div element with the dimensions: width:100px; height:50px. My goal is to resize each flag to fit inside it: .flag{ wi ...
I want to customize the background color of each pill, but I also want a faded version of that custom color with an active color matching the full color of the corresponding pill. pill one > faded red pill two > faded blue pill three > faded bla ...
Is there a more efficient way to position a globe glyph directly to the right of a textbox in multiple places throughout my code, almost touching it? One possible solution is as follows: <div class="col-md-3"> <input class="form-control" ...
Imagine having a series of 10 divs numbered from 1 to 10, and then selecting div 2 and div 7. The goal is to highlight all the divs between these two selected divs once the ending div is chosen after the starting div (starting div=2 and ending div=7). Cur ...
Currently, I am delving into the world of front-end web design and taking advantage of Bootstrap for creating a responsive layout. However, I have noticed that Bootstrap only offers 5 predefined breakpoints. I am curious to know if there is a way to cust ...
I am attempting to split the screen where 80% is dedicated to displaying a Google map at the bottom, and the remaining 20% displays content in a div with the ID '#data' at the top. However, the code below does not seem to achieve this layout as i ...
I am in the process of creating a website quickly using e.js & Express. However, I am encountering some problems when trying to use an if-else statement within e.js tags. The if statement works fine, but as soon as I add an else statement, things start t ...
Can anyone offer assistance? I'm trying to prevent the collapse of the menu on mobile devices in Bootstrap 3. I've searched for a solution but have come up empty. <nav class="navbar navbar-default navbar-static-top"> ...