Скрипт не работает, вероятно, на iOS устройствах - PullRequest
0 голосов
/ 13 апреля 2020

Я сделал сценарий для верхней части, который отлично работает в Safari и Chrome, но не совсем, на iOS -устройствах. Не могу узнать, почему.

Упрощенный html выглядит следующим образом:

<div class="top_btn">...</div>
<div class="content">...</div>
<div class="footer">...</div>

К верхнему-div-кнопки фиксирован, css -> bottom: 20px, правый 20px и со следующим кодом это работает нормально и на iOS:

toTop = jQuery('.top_btn');
function scrollFunction() {
  if (document.body.scrollTop > 240 || document.documentElement.scrollTop > 240) {
    toTop.css('display', 'block');
  } else {
    toTop.css('display', 'none');
  }
}

window.onscroll = function() {scrollFunction()};

jQuery('.top_btn').click(function(e) {
  e.preventDefault()

  jQuery('html, body').animate({scrollTop: jQuery('body').offset().top},250,'linear')
}); 

Когда я прокручиваю вниз до элемента нижнего колонтитула, верхняя кнопка частично покрывает нижний колонтитул, чего я стараюсь избегать. Поэтому я изменил свой скрипт следующим образом:

var toTop = jQuery('.top_btn');

//get value of css bottom-property
var bo = parseInt(jQuery('.top_btn').css('bottom'));

function scrollFunction() {
  if (document.body.scrollTop > 240 || document.documentElement.scrollTop > 240) {
    toTop.css('display', 'block');
  } else {
    toTop.css('display', 'none');
  }

  //top of footer
  var toe = jQuery(".footer").offset().top;

  //bottom footer
  var boe = jQuery(".footer").offset().top + jQuery(".footer").outerHeight();

  // bottom of screen
  var bos = jQuery(window).scrollTop() + jQuery(window).innerHeight();

  // top of screen
  var tos = jQuery(window).scrollTop();

  if ((bos > toe) && (tos < boe)){

        var bn = (bo - (toe - bos))+ 'px';
        jQuery('.top_btn').css('bottom', bn);
  }
}

window.onscroll = function() {scrollFunction()};

jQuery('.top_btn').click(function(e) {
  e.preventDefault()

  jQuery('html, body').animate({scrollTop: jQuery('body').offset().top},250,'linear')
}); 

При iOS прокрутка вниз все работает нормально, пока нижний колонтитул не войдет в область просмотра. Кнопка по-прежнему охватывает элемент нижнего колонтитула. Когда я снова прокручиваю вверх, он переходит вверх на позицию, которая должна быть, на 20 пикселей выше элемента нижнего колонтитула.

Здесь вы найдете пример: Пример страницы (допустимо около 7 дней)

Любые советы?

С уважением, Джо

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...