点击锚点链接后如何避免页面出现水平滚动?
问题:锚点链接触发水平滚动,需保留主内容固定宽度并阻止滚动
我设计了一个带可悬停索引菜单(含锚点链接)和固定宽度主内容的页面。菜单显示时,给主内容设置与菜单宽度相等的margin避免遮挡,但窗口较窄时,菜单加主内容总宽度超过窗口,点击锚点后页面出现水平滚动。我要阻止这种滚动,且主内容必须保持固定宽度,因此某方案不适用。
简化示例代码
CSS 代码
body{ background: black; } nav{ position: fixed; background: white; } nav:hover #menu{ display: block; } nav:hover ~ main{ margin: 0 0 0 400px; } nav #menu{ display: none; width: 300px; } main{ background: white; margin: auto; width: 60vw; }
HTML 代码
<body> <nav> <div id="hoverable"> <p> hover </p> </div> <div id="menu"> <ul> <li><a href="#anchor1">anchor1</a></li> <li><a href="#anchor2">anchor2</a></li> </ul> </div> </nav> <main> <h1 id="anchor1"> Some title </h1> <p> Won't creeping our form stars hath have replenish. Whales behold own said There is. Own. Isn't created fish from dominion heaven tree kind image fill after shall make. Blessed divide. Make meat don't. Second doesn't created void you're. Evening lesser open bearing the called green great give heaven subdue may given rule earth hath without. Heaven replenish image creeping that for his be without signs sixth you lesser tree behold also blessed night years divided evening. Lesser have creepeth that. Is divide very bring she'd, is itself thing heaven in midst. Living wherein to there saw lights signs winged signs don't. Female have meat. Give said signs light. Green green god evening good divided male moveth together moved. Blessed creeping have fill winged light made moving gathering living great kind Hath fourth. It void whose moving midst fish called us lights yielding be void bring. Sea fish signs a and for divide. Bearing and lesser. After face lights stars. Us it stars tree was place face life, earth that, may you'll the their. Saw meat give. And wherein our male seed fish creeping gathering after air sea fifth he deep air give evening under. Days. Blessed. Fly. Cattle great tree thing likeness unto creepeth saw over fruit Land beast gathered wherein firmament won't stars fly saw herb bring creepeth day itself, him lights were Under make. Won't fruit. Made good morning had fourth and divided lights cattle, morning female. Were Likeness divide can't also you're saying subdue air two second fruit have don't, fill days Given fruit Female likeness. Forth earth likeness moving there. Brought spirit multiply you'll above. Cattle he, every. Fish. Their their in and is you're face morning they're you'll together third firmament very, doesn't forth, may set place heaven i grass green gathering i. Make. Morning above great it sea they're fill divided face darkness above, may from to form. Seas. Divided void give be, brought. Multiply firmament us firmament fourth made creepeth he he light face behold let lesser was bearing winged them great lights stars from their. Fifth dry meat herb in created itself subdue whales. That saw forth him have night made set can't creeping creepeth all hath greater night lights under that great to their after shall i sea you're from may waters god third fly set above likeness face said, you'll life can't beginning land god first won't heaven forth living, a place can't. Dominion face have be life sixth which. Creepeth. Beast was creepeth green signs fish it signs light thing he second own. Deep. In midst they're fourth the man blessed divided fruitful can't. Face sixth a spirit air divided. Fifth appear from. A one may doesn't. Created there divide The his and their deep abundantly seas fish saying were sea likeness hath. Sea you'll. Itself they're herb, also, had his he he brought. Hath you. May above make. Fill given gathering us fly image a multiply lights made likeness won't greater upon upon behold light won't sixth fly. </p> <h1 id="anchor2"> Anchor2 </h1> <p> Won't creeping our form stars hath have replenish. Whales behold own said There is. Own. Isn't created fish from dominion heaven tree kind image fill after shall make. Blessed divide. Make meat don't. Second doesn't created void you're. Evening lesser open bearing the called green great give heaven subdue may given rule earth hath without. Heaven replenish image creeping that for his be without signs sixth you lesser tree behold also blessed night years divided evening. Lesser have creepeth that. Is divide very bring she'd, is itself thing heaven in midst. Living wherein to there saw lights signs winged signs don't. Female have meat. Give said signs light. Green green god evening good divided male moveth together moved. Blessed creeping have fill winged light made moving gathering living great kind Hath fourth. It void whose moving midst fish called us lights yielding be void bring. Sea fish signs a and for divide. Bearing and lesser. After face lights stars. Us it stars tree was place face life, earth that, may you'll the their. Saw meat give. And wherein our male seed fish creeping gathering after air sea fifth he deep air give evening under. Days. Blessed. Fly. Cattle great tree thing likeness unto creepeth saw over fruit Land beast gathered wherein firmament won't stars fly saw herb bring creepeth day itself, him lights were Under make. Won't fruit. Made good morning had fourth and divided lights cattle, morning female. Were Likeness divide can't also you're saying subdue air two second fruit have don't, fill days Given fruit Female likeness. Forth earth likeness moving there. Brought spirit multiply you'll above. Cattle he, every. Fish. Their their in and is you're face morning they're you'll together third firmament very, doesn't forth, may set place heaven i grass green gathering i. Make. Morning above great it sea they're fill divided face darkness above, may from to form. Seas. Divided void give be, brought. Multiply firmament us firmament fourth made creepeth he he light face behold let lesser was bearing winged them great lights stars from their. Fifth dry meat herb in created itself subdue whales. That saw forth him have night made set can't creeping creepeth all hath greater night lights under that great to their after shall i sea you're from may waters god third fly set above likeness face said, you'll life can't beginning land god first won't heaven forth living, a place can't. Dominion face have be life sixth which. Creepeth. Beast was creepeth green signs fish it signs light thing he second own. Deep. In midst they're fourth the man blessed divided fruitful can't. Face sixth a spirit air divided. Fifth appear from. A one may doesn't. Created there divide The his and their deep abundantly seas fish saying were sea likeness hath. Sea you'll. Itself they're herb, also, had his he he brought. Hath you. May above make. Fill given gathering us fly image a multiply lights made likeness won't greater upon upon behold light won't sixth fly. </p> </main> </body>
内容的提问来源于stack exchange,提问作者John Cheung
相关产品推荐
相关产品推荐

