圣诞树动画

Question

Виталик Черный

Asked:2020-11-04 23:07:08 +0000 UTC2020-11-04 23:07:08 +0000 UTC 2020-11-04 23:07:08 +0000 UTC

如何更改事件的优先级？

772

当您单击链接时，它会滚动。对我来说，当通过单击另一个链接滚动时，优先级会发生变化，并且滚动更改会发生在另一个地方。

现在转换看起来像这样：

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>

PS：第二个选项不是很合适，因为有支持，无法控制区间。如果有一个js可以配置的纯选项甚至会很好，但最重要的是事件不会相互冲突。

1 个回答

Voted

Виталик Черный · Answer 1 · 2020-11-07T19:41:27Z

用方法解决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>

如何更改事件的优先级？

是否可以在 C++ 中继承类 <---> 结构？

这种神经网络架构适合文本分类吗？

为什么分配的工作方式不同？

控制台中的光标坐标

如何在 C++ 中删除类的实例？

点是否属于线段的问题

json结构错误

ServiceWorker 中的“获取”事件

c ++控制台应用程序exe文件[重复]

按多列从sql表中选择

如何更改事件的优先级？

1 个回答

相关问题