CODEWITHSUNDEEP
htmlcssanchor
Bonsaï
Bonsaï

Reputation: 127

Why is scroll-behavior not working on my phone?

I added the scroll-behavior property in my CSS but it only works on the google chrome tool that allows me to see my website like if it was on a phone. When I load my website on my actual phone, there is no sliding effect. Any idea?

Here is what the code looks like : 

function scrollToSection(event) {
    if (supportsSmoothScrolling()) {
      return;
    }
    event.preventDefault();
    const scrollToElem = document.getElementById("section");
    SmoothVerticalScrolling(scrollToElem, 300, "top");
  }
  
  function supportsSmoothScrolling() {
    const body = document.body;
    const scrollSave = body.style.scrollBehavior;
    body.style.scrollBehavior = 'smooth';
    const hasSmooth = getComputedStyle(body).scrollBehavior === 'smooth';
    body.style.scrollBehavior = scrollSave;
    return hasSmooth;
  };
   
  function SmoothVerticalScrolling(element, time, position) {
    var eTop = element.getBoundingClientRect().top;
    var eAmt = eTop / 100;
    var curTime = 0;
    while (curTime <= time) {
      window.setTimeout(SVS_B, curTime, eAmt, position);
      curTime += time / 100;
    }
  }
  
  function SVS_B(eAmt, position) {
    if (position == "center" || position == "")
    window.scrollBy(0, eAmt / 2);
    if (position == "top")
    window.scrollBy(0, eAmt);
  }
html, body {
    scroll-behavior: smooth;
    overflow-y: scroll;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
        integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container-fluid h-100 nopadding">
    <div class="row h-100 nopadding">
        <div class="col-lg-8 black nopadding text-center d-flex flex-column justify-content-center">
            <a onclick="scrollToSection(event)" href="#more" class="more">Here is the button</a>
        </div>

        <div id="more"
            class="col-lg-4 white nopadding text-center d-flex flex-column align-self-center justify-content-center">
            Here is the section
        </div>
    </div>
</div>

I didn't add all the page elements but the arrow represent the anchor tag in the code : enter image description here

Upvotes: 2

Views: 3221

Answers (1)

Sebastian Richner
Sebastian Richner

Reputation: 760

As you have noticed, Safari does not support the scroll-behavior CSS property (see this). You'd need some JavaScript to achieve the same effect across different browsers. You may find an example here.

Update: This is a working code snippet of this answer (which combines the answers of George Daniel and terrymorse).

function scrollToSection(event) {
  if (supportsSmoothScrolling()) {
    return;
  }
  event.preventDefault();
  const scrollToElem = document.getElementById("section");
  SmoothVerticalScrolling(scrollToElem, 300, "top");
}

function supportsSmoothScrolling() {
  const body = document.body;
  const scrollSave = body.style.scrollBehavior;
  body.style.scrollBehavior = 'smooth';
  const hasSmooth = getComputedStyle(body).scrollBehavior === 'smooth';
  body.style.scrollBehavior = scrollSave;
  return hasSmooth;
};
 
function SmoothVerticalScrolling(element, time, position) {
  var eTop = element.getBoundingClientRect().top;
  var eAmt = eTop / 100;
  var curTime = 0;
  while (curTime <= time) {
    window.setTimeout(SVS_B, curTime, eAmt, position);
    curTime += time / 100;
  }
}

function SVS_B(eAmt, position) {
  if (position == "center" || position == "")
  window.scrollBy(0, eAmt / 2);
  if (position == "top")
  window.scrollBy(0, eAmt);
}
body {
  scroll-behavior: smooth;
  height: 1000px;
}
section {
  margin-top: 500px;
}
<a onclick="scrollToSection(event)" href="#section">
    Redirect On section
</a>
  
<section id="section">
  Section Content
</section>

Upvotes: 3

Related Questions