第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

專注于html的滾動部分

專注于html的滾動部分

泛舟湖上清波郎朗 2022-10-08 15:09:17
我有一個由三個 div 部分組成的頁面。<div id="header"><!--header html goes here--></div><div id="body" class="page-body"><!--main html goes here--></div><div id="footer"><!--footer html goes here--></div>我的CSS是body {    overflow: hidden;}.page-body{    overflow: auto;}問題是如果用戶按下PgDn或down arrow鍵然后頁面不會向下滾動。為了讓頁面通過鍵盤向下滾動,用戶必須首先單擊page-body div部分,然后按鍵才能工作。我曾嘗試autofocus在頁面主體 div 上使用標(biāo)簽或document.getElementById('page-body').focus()在加載時寫入,但似乎沒有任何效果。如何在頁面加載后立即使鍵盤工作而無需單擊該部分?我更喜歡沒有 javascript 的解決方案,因為我的頁面并不真正需要它,但如果我必須,我也可以使用 javascript 解決方案。
查看完整描述

2 回答

?
心有法竹

TA貢獻1866條經(jīng)驗 獲得超5個贊

你快到了,只需在你的 div 上添加一個正的tabindex屬性。但是您應(yīng)該知道,就可訪問性而言,這不是一個很好的做法。

window.onload = function() {

  document.getElementById('body').focus();

};

body {

  overflow: hidden;

}


.page-body {

  overflow: auto;

  max-height: 200px;

}

<div id="header">

  <!--header html goes here-->

</div>

<div id="body" class="page-body" tabIndex="1">

  <p>lorem ipsum</p>

  <p>lorem ipsum</p>

  <p>lorem ipsum</p>

  <p>lorem ipsum</p>

  <p>lorem ipsum</p>

  <p>lorem ipsum</p>

  <p>lorem ipsum</p>

  <p>lorem ipsum</p>

  <p>lorem ipsum</p>

</div>

<div id="footer">

  <!--footer html goes here-->

</div>



查看完整回答
反對 回復(fù) 2022-10-08
?
飲歌長嘯

TA貢獻1951條經(jīng)驗 獲得超3個贊

LattyS 提供了有效的代碼片段和有效的 js 答案,但是如果您想在不使用 js 的情況下完成此操作,那么您所要做的就是使用tabindex屬性和autofocus屬性。


body {

  overflow: hidden;

}


.page-body {

  overflow: auto;

  max-height: 200px;

}

<div id="header">

  <!--header html goes here-->

  Header

</div>

<div id="body" class="page-body" tabIndex="1" autofocus>

  <p>123</p>

  <p>123 123</p>

  <p>123 123 123</p>

  <p>123 123 123 123</p>

  <p>123 123 123 123 123</p>

  <p>123 123 123 123</p>

  <p>123 123 123</p>

  <p>123 123</p>

  <p>123</p>

</div>

<div id="footer">

  <!--footer html goes here-->

  Footer

</div>


查看完整回答
反對 回復(fù) 2022-10-08
  • 2 回答
  • 0 關(guān)注
  • 115 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號