javascript - 计算样式未以图形方式显示

Question

我有一个垂直导航栏。当客户在网站上查看与导航栏按钮对应的页面部分时，该按钮周围应该有一个白色边框。当客户离开那个部分去另一个部分时，那个按钮周围应该有一个边框，最后一个按钮的边框应该消失。

不幸的是，只有一半有效。我不知道为什么，但是当我滚动到另一个部分时，最后一个部分对应的按钮不会丢失它的边框，即使调试消息指出边框颜色已被计算为“透明”。

我尝试将边框的所有面都设置为透明(顶部、底部、左侧、右侧)，并且我尝试将样式设置为 jquery。

    $(document).ready(() => {
    $('.page').css('height', $(window).height());
    $('.navbar').css('height', $(window).height());
})
let currentActiveButton = null;

document.addEventListener("scroll", () => {
  let ids = calculateVisiblePages();
  console.log(ids.join(", ") + "\n");
  let heights = getVisibleHeights(ids);
  let entry;
  let highest = -1;

  for (let i = 0; i < ids.length; i++) {
    const id = ids[i];

    if (highest == -1) {
      highest = heights[id];
      entry = id;
      continue;
    }

    let height = heights[id];

    if (highest < height) {
      highest = height;
      entry = id;
    }
  }

  //   console.log(`Highest: ${entry}`);

  if (currentActiveButton === entry) return;
  if (currentActiveButton != null) {
    console.log(
      `Attempting to set current active button, id is ${currentActiveButton}, to transparent.`
    );
    let activeButton = document.getElementById(currentActiveButton);
    activeButton.style.borderColor = 'transparent';
    let computedStyle = window.getComputedStyle(activeButton);
    console.log(`Computes style border color: ${computedStyle.borderTopColor}`);
  }
  currentActiveButton = entry;
  let buttons = document.getElementsByClassName("navbar_button");

  switch (entry) {
    case "projects": {
      console.log("Case is projects.");
      borderButton("portfolioButton");
      return;
    }

    case "previousComms": {
      borderButton("previousCommsButton");
      return;
    }

    case "aboutMe": {
      borderButton("aboutMeButton");
      return;
    }
  }
});

// function getCurrentActiveButton() {
//   let buttons = document.getElementsByClassName("navbar_button");

//   for (let i = 0; i < buttons.length; i++) {
//     const button = buttons[i];
//     let computed = window.getComputedStyle(button);

//     if (computed.borderTopColor.startsWith("rgba(255, 255, 255")) {
//       return button;
//     }
//   }
// }

function borderButton(id) {
  let button = document.getElementById(id);
  let computedStyle = window.getComputedStyle(button);
  button.style.borderColor = "white";
}

function calculateVisiblePages() {
  let pages = document.getElementsByClassName("page");
  let visible = [];

  for (let i = 0; i < pages.length; i++) {
    const page = pages[i];
    if (isVisible(page)) visible.push(page.id);
  }

  return visible;
}

function isVisible(element) {
  let elementTop = element.offsetTop;
  let elementBottom =
    elementTop + Number(element.style.height.replace("px", ""));
  let viewportTop = window.scrollY;
  let viewportBottom = viewportTop + window.innerHeight;
  return elementBottom > viewportTop && elementTop < viewportBottom;
}

function getVisibleHeights(ids) {
  let cache = {};

  for (let i = 0; i < ids.length; i++) {
    // console.log(`Iterating on element: ${ids[i]}`);
    const element = document.getElementById(ids[i]);
    let elementTop = element.offsetTop;
    let elementBottom =
      elementTop + Number(element.style.height.replace("px", ""));
    let viewportBottom = window.scrollY + window.innerHeight;
    let bottom = elementBottom - viewportBottom;
    if (bottom < 0) bottom = elementBottom;
    if (bottom < viewportBottom && viewportBottom < elementBottom)
      bottom = viewportBottom;
    let top = elementTop > window.scrollY ? elementTop : window.scrollY;
    cache[element.id] = bottom - top;

    // for (let i = elementTop; i < elementBottom; i++) {
    //   //Check if pixel is in element and in the viewport.

    //   //   console.log(`Iteration: ${i}`);

    //   if (i < window.scrollY) continue;
    //   if (i > window.scrollY && i < elementBottom && i < viewportBottom) {
    //     cache[element.id] = i - window.scrollY;
    //   }
    // }
  }

  return cache;
}

CSS:

@import url(https://fonts.googleapis.com/css?family=Roboto:500&display=swap);

.root {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 95% 5%
}

.pages {
    display: grid;
    grid-template-rows: auto auto auto
}

.page {
    height: 100%;
    width: 100%
}

#projects {
    background: #00f
}

#previousComms {
    background: #ff0
}

#aboutMe {
    background: red
}

.navbar_buttons_wrapper {
    height: 100%;
    width: 5%;
    position: fixed;
    top: 0;
    right: 0
}

.navbar_buttons {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center
}

.navbar_buttons ul {
    height: auto;
    list-style: none;
    color: #fff;
    padding: 0;
    display: grid;
    grid-template-columns: auto auto auto;
    transform: rotate(-90deg)
}

.navbar_buttons ul li {
    width: max-content;
    margin-left: 30px;
    margin-right: 30px;
    font-size: 1.2rem;
    text-transform: uppercase;
    border-style: solid;
    border-color: transparent;
    transition: .7s;
    padding: 7px
}

html body {
    font-family: Roboto, sans-serif;
    margin: 0;
    border: 0;
    padding: 0;
    background: #2c2c2c
}

HTML:

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="./styles/main.css" />
    <script type="text/javascript" src="./scripts/main-min.js"></script>
  </head>
  <body>
    <div class="root">
      <div class="pages">
        <div class="page" id="projects"></div>
        <div class="page" id="previousComms"></div>
        <div class="page" id="aboutMe"></div>
      </div>
      <div class="navbar">
        <div class="navbar_buttons_wrapper">
          <div class="navbar_buttons">
            <ul>
              <li class="navbar_button" id="portfolioButton">Portfolio</li>
              <li class="navbar_button" id="previousCommsButton">Previous Commissioners</li>
              <li class="navbar_button" id="aboutMeButton">About Me</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

我原以为边框会从白色变为透明。然而，我得到的只是我之前在网站上查看的部分按钮边框的颜色没有变化:

移动前:https://gyazo.com/77171adefe255973709f11e305bfb030移动后:https://gyazo.com/b121d1d33b4f5f205df1468cd936352b

移动前来源:https://gyazo.com/92359267cf06cbe3b7c4942f04dbf9ea移动后来源:https://gyazo.com/7cc03865e17fc42382774747fb30052a

Github 元素文件:https://github.com/TheMasteredPanda/Portfolio-Website/blob/master/src/scripts/src/navbarBorderManagement.js#L32

Answer 1

你的问题是你的 ID 之间的命名约定不一致，这会导致你的元素对象被混淆，所以如果你在设置 borderColor 的地方断点以将其重置为透明，你会看到你'重新点击页面 HTMLDivElement 而不是您要访问的 li。查看下面的变化，祝周末愉快，干杯!

$(document).ready(() => {
    $('.page').css('height', $(window).height());
    $('.navbar').css('height', $(window).height());
})
let currentActiveButton = null;

document.addEventListener("scroll", () => {
  let ids = calculateVisiblePages();
  console.log(ids.join(", ") + "\n");
  let heights = getVisibleHeights(ids);
  let entry;
  let highest = -1;

  for (let i = 0; i < ids.length; i++) {
    const id = ids[i];

    if (highest == -1) {
      highest = heights[id];
      entry = id;
      continue;
    }

    let height = heights[id];

    if (highest < height) {
      highest = height;
      entry = id;
    }
  }

  //   console.log(`Highest: ${entry}`);

  if (currentActiveButton === entry) return;
  if (currentActiveButton != null) {
    console.log(
      `Attempting to set current active button, id is ${currentActiveButton}, to transparent.`
    );
    let activeButton = document.getElementById(currentActiveButton + 'Button');
    activeButton.style.borderColor = 'transparent';
    let computedStyle = window.getComputedStyle(activeButton);
    console.log(`Computes style border color: ${computedStyle.borderTopColor}`);
  }
  currentActiveButton = entry;
  let buttons = document.getElementsByClassName("navbar_button");

  switch (entry) {
    case "projects": {
      console.log("Case is projects.");
      borderButton("projectsButton");
      return;
    }

    case "previousComms": {
      borderButton("previousCommsButton");
      return;
    }

    case "aboutMe": {
      borderButton("aboutMeButton");
      return;
    }
  }
});

// function getCurrentActiveButton() {
//   let buttons = document.getElementsByClassName("navbar_button");

//   for (let i = 0; i < buttons.length; i++) {
//     const button = buttons[i];
//     let computed = window.getComputedStyle(button);

//     if (computed.borderTopColor.startsWith("rgba(255, 255, 255")) {
//       return button;
//     }
//   }
// }

function borderButton(id) {
  let button = document.getElementById(id);
  let computedStyle = window.getComputedStyle(button);
  button.style.borderColor = "white";
}

function calculateVisiblePages() {
  let pages = document.getElementsByClassName("page");
  let visible = [];

  for (let i = 0; i < pages.length; i++) {
    const page = pages[i];
    if (isVisible(page)) visible.push(page.id);
  }

  return visible;
}

function isVisible(element) {
  let elementTop = element.offsetTop;
  let elementBottom =
    elementTop + Number(element.style.height.replace("px", ""));
  let viewportTop = window.scrollY;
  let viewportBottom = viewportTop + window.innerHeight;
  return elementBottom > viewportTop && elementTop < viewportBottom;
}

function getVisibleHeights(ids) {
  let cache = {};

  for (let i = 0; i < ids.length; i++) {
    // console.log(`Iterating on element: ${ids[i]}`);
    const element = document.getElementById(ids[i]);
    let elementTop = element.offsetTop;
    let elementBottom =
      elementTop + Number(element.style.height.replace("px", ""));
    let viewportBottom = window.scrollY + window.innerHeight;
    let bottom = elementBottom - viewportBottom;
    if (bottom < 0) bottom = elementBottom;
    if (bottom < viewportBottom && viewportBottom < elementBottom)
      bottom = viewportBottom;
    let top = elementTop > window.scrollY ? elementTop : window.scrollY;
    cache[element.id] = bottom - top;

    // for (let i = elementTop; i < elementBottom; i++) {
    //   //Check if pixel is in element and in the viewport.

    //   //   console.log(`Iteration: ${i}`);

    //   if (i < window.scrollY) continue;
    //   if (i > window.scrollY && i < elementBottom && i < viewportBottom) {
    //     cache[element.id] = i - window.scrollY;
    //   }
    // }
  }

  return cache;
}

@import url(https://fonts.googleapis.com/css?family=Roboto:500&display=swap);

.root {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 95% 5%
}

.pages {
    display: grid;
    grid-template-rows: auto auto auto
}

.page {
    height: 100%;
    width: 100%
}

#projects {
    background: #00f
}

#previousComms {
    background: #ff0
}

#aboutMe {
    background: red
}

.navbar_buttons_wrapper {
    height: 100%;
    width: 5%;
    position: fixed;
    top: 0;
    right: 0
}

.navbar_buttons {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center
}

.navbar_buttons ul {
    height: auto;
    list-style: none;
    color: #fff;
    padding: 0;
    display: grid;
    grid-template-columns: auto auto auto;
    transform: rotate(-90deg)
}

.navbar_buttons ul li {
    width: max-content;
    margin-left: 30px;
    margin-right: 30px;
    font-size: 1.2rem;
    text-transform: uppercase;
    border-style: solid;
    border-color: transparent;
    transition: .7s;
    padding: 7px
}

html body {
    font-family: Roboto, sans-serif;
    margin: 0;
    border: 0;
    padding: 0;
    background: #2c2c2c
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="./styles/main.css" />
    <script type="text/javascript" src="./scripts/main-min.js"></script>
  </head>
  <body>
    <div class="root">
      <div class="pages">
        <div class="page" id="projects"></div>
        <div class="page" id="previousComms"></div>
        <div class="page" id="aboutMe"></div>
      </div>
      <div class="navbar">
        <div class="navbar_buttons_wrapper">
          <div class="navbar_buttons">
            <ul>
              <li class="navbar_button" id="projectsButton">Portfolio</li>
              <li class="navbar_button" id="previousCommsButton">Previous Commissioners</li>
              <li class="navbar_button" id="aboutMeButton">About Me</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>