我一直在为残疾人尝试不同的导航方式。现在，只要用户将它们滚动到视口中，我就会专注于某些链接。我当前的代码正在做一些事情，但它真的被打破了。我无法工作的事情是：每当我向下滚动链接获得焦点状态就像我想要的那样，但是，标签键焦点行为被打破了。另一个大问题是，当用户实际按下返回导航链接时，由于滚动事件，第一篇文章得到了焦点状态代替导航。我已经盯着这几天了，但我无法让它发挥作用。欢迎任何帮助。
const ALL_LINKS = document.querySelectorAll('a');
const ALL_BACK_TO_NAVIGATION_LINKS = document.querySelectorAll(
'a.back-to-navigation'
);
const ALL_ARTICLES = document.querySelectorAll('article');
const FIRST_NAV_ITEM = document.getElementById('first-navigation-item');
const calcVisibilityForElem = (elem) => {
const windowHeight = window.innerHeight;
const docScroll = window.pageYOffset || document.documentElement.scrollTop;
const divPosition = elem.offsetTop;
const divHeight = elem.offsetHeight;
const hiddenBefore = docScroll - divPosition;
const hiddenAfter = divPosition + divHeight - (docScroll + windowHeight);
if (
docScroll > divPosition + divHeight ||
divPosition > docScroll + windowHeight
) {
return 0;
} else {
let result = 100;
if (hiddenBefore > 0) {
result -= (hiddenBefore * 100) / divHeight;
}
if (hiddenAfter > 0) {
result -= (hiddenAfter * 100) / divHeight;
}
return result;
}
};
const getFirstArticleInViewport = () => {
for (let i = 0; i < ALL_ARTICLES.length; i++) {
if (calcVisibilityForElem(ALL_ARTICLES[i]) >= 95) {
ALL_ARTICLES[i].querySelector('a').focus();
break;
}
}
};
ALL_LINKS.forEach((link) => {
link.addEventListener('focus', (link) => {
link.target.scrollIntoView({
behavior: 'smooth',
block: 'center',
inline: 'center',
});
});
});
ALL_BACK_TO_NAVIGATION_LINKS.forEach((link) => {
link.addEventListener('click', (e) => {
e.preventDefault();
FIRST_NAV_ITEM.focus();
});
});
window.addEventListener('scroll', () => {
getFirstArticleInViewport();
});* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
ul,
li {
list-style: none;
}
h2 {
margin-bottom: 1rem;
}
p {
margin-bottom: 1rem;
}
article {
margin-bottom: 2.5rem;
}
nav {
padding: 2rem 0 3.5rem;
}
nav ul {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
nav li {
margin-bottom: 0.5rem;
margin-right: 1rem;
}
a:focus {
background-color: yellow;
}
.wrapper {
margin: 0 auto;
max-width: 40rem;
width: 95%;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Demo 1</title>
<link rel="stylesheet" href="./main.css">
</head>
<body>
<div class="wrapper">
<nav>
<ul>
<li>
<a href="#article-1" id="first-navigation-item">Harry Buckwalter</a>
</li>
<li>
<a href="#article-2">Star Goose</a>
</li>
<li>
<a href="#article-3">John Spencer Login</a>
</li>
<li>
<a href="#article-4">Nun, Brüder, sind wir frohgemut</a>
</li>
<li>
<a href="#article-5">Yato Dharma Tato Jaya</a>
</li>
</ul>
</nav>
<main>
<article id="article-1">
<h2>Harry Buckwalter</h2>
<p>Harry Hale Buckwalter was born in Reading, Pennsylvania and left for the American West at the age of 16. In Colorado
Springs he met his future wife, Carrie Emmajean Fuller, born in New York in 1868, whom he married in 1889. They
moved to Denver and had two children, John in 1894 and Margaret in 1899.[1][2] In 1892, he became interested in
photography and began his career at The Denver Republican as a printer and then as a reporter and photographer
at the Rocky Mountain News of Denver, the first daily newspaper founded in Colorado. His photos were first reproduced
by artists using wood block illustrations then later in halftone as printing technology in the region advanced.[3]
In 1894, Buckwalter teamed with balloonist Ivy Baldwin for a series of aerial photographs of Colorado. Baldwin's
balloon was not capable of lifting both men, so Buckwalter made a solo ascent launching from Elitch Gardens in
Denver. His article 'Dancing in the Air' and photographs of the experience was one of the first examples of photojournalism
in the American West</p>
<a href="#" class="back-to-navigation">Back to navigation</a>
</article>
<article id="article-2">
<h2>Star Goose</h2>
<p>Star Goose (sometimes stylized as Stargoose) is a single-player vertically scrolling shoot 'em up video game that
was published for Amiga computers, the Atari ST, and MS-DOS by Logotron in 1988. The player controls Scouser-Gitt,
who pilots the eponymous Star Goose, a vessel that has been commissioned to scour the planet Nom and collect 48
crystals. Players must collect all six crystals in each of the game's eight levels to advance, while at the same
time avoiding or destroying enemies and maintaining their shield, ammunition, and fuel levels. The game's surfaces
are contoured, which affects the way that bullets travel, and contain tunnels that switch modes to a three-dimensional
perspective where the player can replenish their resources.</p>
<a href="#" class="back-to-navigation">Back to navigation</a>
</article>
<article id="article-3">
<h2>John Spencer Login</h2>
<p>Born in the seaport of Stromness, Orkney, in 1809, Login went on to study medicine at the University of Edinburgh
and was, within a few years, offered the post of assistant surgeon for the East India Company. Arriving in Calcutta
in 1832, he initially had appointments with the Bengal establishment and the Nizam’s army. Later roles included,
amongst others, medical charge of the horse artillery in the Afghan campaign, residency surgeoncy at Lucknow, action
in the Second Anglo-Sikh War and in 1849, the appointment as the Governor of Lahore.</p>
<a href="#" class="back-to-navigation">Back to navigation</a>
</article>
<article id="article-4">
<h2>Nun, Brüder, sind wir frohgemut</h2>
<p>"Nun, Brüder, sind wir frohgemut" (Now, brothers, we are cheerful) is a German Catholic hymn. It was written by Georg
Thurmair as both a pilgrimage song and a Marian hymn. The melody was composed by Adolf Lohmann, who wrote a choral
setting in 1936. Related to youth pilgrimages to an image of Mary at the Altenberger Dom, it is also known as "Altenberger
Wallfahrtslied" (Altenberg pilgrimage song). The song is regarded as an Oppositionelles Lied (Oppositional song),
in subtle protest against the Nazi regime.</p>
<a href="#" class="back-to-navigation">Back to navigation</a>
</article>
<article id="article-5">
<h2>Yato Dharma Tato Jaya</h2>
<p>The phrase comes from Sanskrit: यतः कृष्णस्ततो धर्मो यतो धर्मस्ततो जयः on the battlefield of Kurukshetra War when
Arjuna is trying to shake the despondency of Yudhisthira.[3] He says that "victory is ensured for the side standing
with Dharma, where Krishna is, there is victory".[4] It occurs again when Gandhari, the mother of Kauravas, having
lost all her sons in the war, utters it with the intent: "Where there is Lord Krishna there is Dharma, and where
there is Dharma there is Victory".</p>
<a href="#" class="back-to-navigation">Back to navigation</a>
</article>
</main>
</div>
<script src="./main.js"></script>
</body>
</html>