как изменить приоритет у события?

305

29 марта 2019, 05:40

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

Сейчас переходы выглядят так:

function getElemClass(name) { 
  return document.getElementsByClassName(name); 
} 
 
function getElemId(name) { 
  return document.getElementById(name); 
} 
 
function scrollToElement(duration, on, aim) { 
  return function(e) { 
    let target = e.target; 
    let _aim = aim || this.href || target.href; 
 
    //Цикл двигается вверх от target к родителям. 
    if (!_aim) { 
      while (target != this) { 
        target = target.parentNode; 
        //Поиск интересующего элемента 
        if (target.tagName === "A") { 
          _aim = target.href; 
          break; 
        } 
      } 
    } 
 
    if (!_aim) return; 
 
    _aim = _aim.substring(_aim.indexOf("#")); 
 
    let distance = Math.abs($(on)[0].getBoundingClientRect().top - 
      $(_aim)[0].getBoundingClientRect().top); 
 
    e.preventDefault(); 
 
    $(on).animate({ 
      scrollTop: distance 
    }, duration); 
  } 
} 
 
getElemClass("nav")[0].addEventListener("click", scrollToElement(1000, "html"));

*, 
*:before, 
*:after { 
  box-sizing: border-box; 
} 
 
body, 
p, 
figure, 
h1, 
h2, 
h3, 
h4, 
h5, 
h6 { 
  margin: 0; 
} 
 
ul, 
ol, 
dl, 
li, 
menu { 
  margin: 0; 
  padding: 0; 
  list-style: none; 
} 
 
input[type="search"]::-webkit-search-cancel-button { 
  display: none; 
} 
 
button { 
  outline: none; 
  border: none; 
  padding: 0; 
} 
 
input, 
select { 
  outline: none; 
  border: none; 
} 
 
a { 
  text-decoration: none; 
} 
 
i { 
  font-style: normal; 
} 
 
img { 
  max-width: 100%; 
  vertical-align: middle; 
  border: none; 
} 
 
#header { 
  height: 800px; 
  background: #312; 
} 
 
#main { 
  height: 800px; 
  background: #653; 
} 
 
#footer { 
  height: 800px; 
  background: #762; 
} 
 
.nav { 
  position: fixed; 
  font-size: 30px; 
  background: #764; 
  padding: 10px; 
  left: 50%; 
  display: flex; 
  transform: translateX(-50%); 
} 
 
.nav__item:not(:last-child) { 
  margin-right: 20px; 
} 
 
.nav__link { 
  color: #fff; 
}

<!DOCTYPE html> 
<html lang="en"> 
 
<head> 
  <meta charset="UTF-8"> 
  <title>Document</title> 
</head> 
 
<body> 
  <nav class="nav"> 
    <li class="nav__item"> 
      <a href="#header" class="nav__link">Header</a> 
    </li> 
    <li class="nav__item"> 
      <a href="#main" class="nav__link">Main</a> 
    </li> 
    <li class="nav__item"> 
      <a href="#footer" class="nav__link">Footer</a> 
    </li> 
  </nav> 
  <header id="header"></header> 
  <main id="main"></main> 
  <footer id="footer"></footer> 
</body> 
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> 
 
</html>

Необходимо так:

function getElemClass(name) { 
  return document.getElementsByClassName(name); 
} 
 
function getElemId(name) { 
  return document.getElementById(name); 
} 
 
function scrollToElement(duration, on, aim) { 
  return function(e) { 
    let target = e.target; 
    let _aim = aim || this.href || target.href; 
 
    //Цикл двигается вверх от target к родителям. 
    if (!_aim) { 
      while (target != this) { 
        target = target.parentNode; 
        //Поиск интересующего элемента 
        if (target.tagName === "A") { 
          _aim = target.href; 
          break; 
        } 
      } 
    } 
 
    if (!_aim) return; 
 
    _aim = _aim.substring(_aim.indexOf("#")); 
 
    let distance = Math.abs($(on)[0].getBoundingClientRect().top - 
      $(_aim)[0].getBoundingClientRect().top); 
 
    e.preventDefault(); 
 
    getElemId(_aim.split('#')[1]).scrollIntoView({ 
      behavior: 'smooth' 
    }); 
  } 
} 
 
getElemClass("nav")[0].addEventListener("click", scrollToElement(1000, "html"));

*, 
*:before, 
*:after { 
  box-sizing: border-box; 
} 
 
body, 
p, 
figure, 
h1, 
h2, 
h3, 
h4, 
h5, 
h6 { 
  margin: 0; 
} 
 
ul, 
ol, 
dl, 
li, 
menu { 
  margin: 0; 
  padding: 0; 
  list-style: none; 
} 
 
input[type="search"]::-webkit-search-cancel-button { 
  display: none; 
} 
 
button { 
  outline: none; 
  border: none; 
  padding: 0; 
} 
 
input, 
select { 
  outline: none; 
  border: none; 
} 
 
a { 
  text-decoration: none; 
} 
 
i { 
  font-style: normal; 
} 
 
img { 
  max-width: 100%; 
  vertical-align: middle; 
  border: none; 
} 
 
#header { 
  height: 1200px; 
  background: #312; 
} 
 
#main { 
  height: 1200px; 
  background: #653; 
} 
 
#footer { 
  height: 1200px; 
  background: #135; 
} 
 
.nav { 
  position: fixed; 
  font-size: 30px; 
  background: #764; 
  padding: 10px; 
  left: 50%; 
  display: flex; 
  transform: translateX(-50%); 
} 
 
.nav__item:not(:last-child) { 
  margin-right: 20px; 
} 
 
.nav__link { 
  color: #fff; 
}

<!DOCTYPE html> 
<html lang="en"> 
 
<head> 
  <meta charset="UTF-8"> 
  <title>Document</title> 
</head> 
 
<body> 
  <nav class="nav"> 
    <li class="nav__item"> 
      <a href="#header" class="nav__link">Header</a> 
    </li> 
    <li class="nav__item"> 
      <a href="#main" class="nav__link">Main</a> 
    </li> 
    <li class="nav__item"> 
      <a href="#footer" class="nav__link">Footer</a> 
    </li> 
  </nav> 
  <header id="header"></header> 
  <main id="main"></main> 
  <footer id="footer"></footer> 
</body> 
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> 
 
</html>

P.S: Второй вариант не очень подходит, из-за поддержки и не имение возможно контролировать интервал. Будет даже хорошо, если будет вариант на чистом js, который можно будет настроить, но самое главное, что бы события между собой не конфликтовали.

Answer 1

Решил при помощи метода stop - Jquery.

function getElemClass(name) { 
  return document.getElementsByClassName(name); 
} 
 
function getElemId(name) { 
  return document.getElementById(name); 
} 
 
let animationState = false; 
 
function animateScroll(duration, on, distance) { 
  $(on).animate({ 
    scrollTop: distance 
  }, duration, function() { 
    animationState = false; 
  }); 
} 
 
function scrollToElement(duration, on, aim) { 
  return function(e) { 
    let target = e.target; 
    let _aim = aim || this.href || target.href; 
 
    //Цикл двигается вверх от target к родителям. 
    if (!_aim) { 
      while (target != this) { 
        target = target.parentNode; 
        //Поиск интересующего элемента 
        if (target.tagName === "A") { 
          _aim = target.href; 
          break; 
        } 
      } 
    } 
 
    if (!_aim) return; 
 
    _aim = _aim.substring(_aim.indexOf("#")); 
 
    let distance = Math.abs($(on)[0].getBoundingClientRect().top - 
      $(_aim)[0].getBoundingClientRect().top); 
 
    e.preventDefault(); 
 
    if (animationState) { 
      $(on).stop(); 
      animateScroll(duration, on, distance); 
      return; 
    } 
    animationState = true; 
 
    animateScroll(duration, on, distance); 
  } 
} 
 
document.addEventListener("click", scrollToElement(1000, "html"));

*, 
*:before, 
*:after { 
  box-sizing: border-box; 
} 
 
body, 
p, 
figure, 
h1, 
h2, 
h3, 
h4, 
h5, 
h6 { 
  margin: 0; 
} 
 
ul, 
ol, 
dl, 
li, 
menu { 
  margin: 0; 
  padding: 0; 
  list-style: none; 
} 
 
input[type="search"]::-webkit-search-cancel-button { 
  display: none; 
} 
 
button { 
  outline: none; 
  border: none; 
  padding: 0; 
} 
 
input, 
select { 
  outline: none; 
  border: none; 
} 
 
a { 
  text-decoration: none; 
} 
 
i { 
  font-style: normal; 
} 
 
img { 
  max-width: 100%; 
  vertical-align: middle; 
  border: none; 
} 
 
#header { 
  height: 1200px; 
  background: #312; 
} 
 
#main { 
  height: 1200px; 
  background: #653; 
} 
 
#footer { 
  height: 1200px; 
  background: #135; 
} 
 
.nav { 
  position: fixed; 
  font-size: 30px; 
  background: #764; 
  padding: 10px; 
  left: 50%; 
  display: flex; 
  transform: translateX(-50%); 
} 
 
.nav__item:not(:last-child) { 
  margin-right: 20px; 
} 
 
.nav__link { 
  color: #fff; 
}

<!DOCTYPE html> 
<html lang="en"> 
 
<head> 
  <meta charset="UTF-8"> 
  <title>Document</title> 
</head> 
 
<body> 
  <nav class="nav"> 
    <li class="nav__item"> 
      <a href="#header" class="nav__link">Header</a> 
    </li> 
    <li class="nav__item"> 
      <a href="#main" class="nav__link">Main</a> 
    </li> 
    <li class="nav__item"> 
      <a href="#footer" class="nav__link">Footer</a> 
    </li> 
  </nav> 
  <header id="header"></header> 
  <main id="main"></main> 
  <footer id="footer"></footer> 
</body> 
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> 
 
</html>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Не выводится внешний скрипт js

Создала файл 123js написала туда alert(111);

198

javascript

Как положить js в js

Суть: нужно, чтобы при нажатии на кнопку на странице появлялась карта доставщика (в данном случае, боксбери)! Но запихнув его в js он не срабатывает!...

245

javascript

JS применение метода foreach у массива

210

javascript

Логический оператор ||

Суть задачи: дана строка, в ней нужно просуммировать все гласные

221