#javascript #html #autofocus
#javascript #HTML #автофокусировка
Вопрос:
Я пытаюсь отображать страницы с элементами автофокусировки, но страницы отображаются, начиная с самого верха страницы. Однако автофокусировка, похоже, фокусируется после срабатывания события onload. Следующий фрагмент кода демонстрирует это поведение. Есть ли способ запустить прокрутку после прокрутки автофокусировки?
У меня нет большого контроля над html, поэтому я ограничен в своих возможностях редактировать его, но я могу внедрить в него js. Моя резервная копия заключается в использовании js для запроса страницы на наличие элементов с автофокусировкой, удаления автофокусировки из элемента, а затем выполнения element.focus({preventScroll: true}) при загрузке.
<!DOCTYPE html><html>
<head><meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>demo</title>
</head>
<body><article class="markdown-body">
<!-- This next line should scroll to the top of the page on load, but the page still autofocuses on the button after load -->
<script>
function scrollToTopOfPage() {window.scrollTo(0,0);}
window.onload=scrollToTopOfPage()
</script>
<h1 id="lorem-ipsum">Lorem Ipsum<a class="headerlink" href="#lorem-ipsum" title="Permanent link"></a></h1>
<p>Quis sit adipisci unde tempore corporis fugit. Ad commodi illo numquam nam adipisci nihil. Totam debitis quia quos eius et. Quo dolor consequatur itaque temporibus fugit qui.</p>
<p>Ratione quos nesciunt quas consequuntur consequatur. Sit cupiditate veniam soluta tempora eum in sequi modi. Consequatur animi consequatur est omnis sint. Sunt in omnis amet et ut distinctio et quia. Non repellendus ut aut aliquam vitae esse dolores non.</p>
<p>Id aut quo repellendus est quasi esse sunt ipsum. Vitae quo cupiditate voluptas ut quis error quibusdam eveniet. Totam quaerat ipsam voluptas. Necessitatibus molestias aut ex non. Similique et iusto aperiam eveniet debitis quas quis fuga. Debitis sapiente eius est dolorem.</p>
<p>Laudantium eum expedita et. Hic voluptatem ut nulla magni quae. Non tempore vel sapiente enim aut. Molestiae qui rerum reiciendis fugit quasi enim. Atque ipsum et sint omnis fugiat facere assumenda.</p>
<p>Quidem qui in neque itaque praesentium rerum molestias exercitationem. Veritatis ipsam in expedita magni quibusdam maxime. Consectetur aut nesciunt reiciendis maxime quia dolorem. Fuga tempore et veritatis aut.</p>
<p>Asperiores dicta sit consectetur. Id omnis rem et qui ullam nesciunt. Et officiis amet deleniti aut sint sunt nemo. Ullam recusandae et debitis eaque rem itaque et pariatur. Beatae at aut fugiat tempora aliquid suscipit. Incidunt sapiente ut sed debitis.</p>
<p>Incidunt magni earum voluptatum dolorem. Amet ducimus harum possimus doloremque aut. Consequatur consequuntur tempora omnis tempora rem ea. Eaque ut ea illum sed eligendi autem quae. Ipsam occaecati dolor dolorem ea est. Modi vitae in eaque voluptatem.</p>
<p>Consequatur sit suscipit dolorum velit sit voluptatem quo. Porro ut inventore veniam cumque et in voluptas. Cum ipsa dicta dolorum aut. Pariatur vitae atque eum et provident id officia ducimus. Non et a molestias consequatur.</p>
<p>Quo nulla praesentium at neque iste alias animi placeat. Quas numquam aut illum vel facere dignissimos rerum. Id laboriosam expedita est maxime ullam sint.</p>
<p>Culpa sapiente est nostrum pariatur modi numquam distinctio sed. Eaque amet vitae nemo enim ea qui. Quibusdam in quas quasi suscipit rerum dolores consequatur. Sapiente minus dolorem sint. Est quos ipsa mollitia qui.</p>
<h1 id="buttons">Buttons<a class="headerlink" href="#buttons" title="Permanent link"></a></h1>
<p>
<button autofocus>Ok</button>
<button>Cancel</button>
<button onclick=scrollToTopOfPage()>Scroll to top of page</button>
</p>
</article></body>
</html>
Комментарии:
1. проверьте learn.javascript.ru/size-and-scroll-window и learn.javascript.ru/onload-ondomcontentloaded