![](/img/trans.png)
[英]Prevent location.hash in an iframe from scrolling the parent window in Chrome
[英]Prevent hash change from scrolling
抱歉下面的丑陋布局示例... http://www.wthdesign.net/test/test2.html
我設法將我的 ID 名稱附加到網址:
function generateUrl(el)
{
var currentId = $(el).attr('id');
document.location.hash = currentId;
}
並添加:
<a id="abc2" onClick="generateUrl(this)" >this is an anchor btn</a>
但這最終與以下效果相同:
<a id="abc2" href="#abc2" >this is an anchor btn</a>
一切都很好,但我只是不希望它在單擊鏈接時滾動我應該怎么做? 提前謝謝了。
如果不需要 id,只需使用href="#some-value
更改窗口位置而不滾動頁面。如果您確實需要文檔中的id
(在本例中為 a 標簽),則位置更改將導致滾動。您可以通過在現代瀏覽器中使用history
對象或通過在鏈接單擊上存儲滾動位置,然后使用hashchange
事件重置它來解決此hashchange
。
我將在這兩種解決方案中使用此標記:
示例標記:
<div class="filler"></div>
<a id="abc1" href="#abc1" class="my-class">this is an anchor btn</a>
<div class="filler"></div>
<a id="abc2" href="#abc2" class="my-class">this is an anchor btn</a>
<div class="filler"></div>
<a id="abc3" href="#abc3" class="my-class">this is an anchor btn</a>
<div class="filler"></div>
//get element referneces
var elems = document.getElementsByClassName('my-class');
//iterate over the references
for (var i=0; i<elems.length; ++i) {
//add click function to each element
elems[i].addEventListener('click', clickFunc);
}
//this will store the scroll position
var keepScroll = false;
//fires when a ".my-class" link is clicked
function clickFunc(e) {
//prevent default behavior of the link
e.preventDefault();
//add hash
history.replaceState({}, '', e.target.href);
}
JavaScript:
//get element referneces
var elems = document.getElementsByClassName('my-class');
//iterate over the references
for (var i=0; i<elems.length; ++i) {
//add click function to each element
elems[i].addEventListener('click', clickFunc);
}
//this will store the scroll position
var keepScroll = false;
//fires when a ".my-class" link is clicked
function clickFunc(e) {
//if the location hash is already set to this link
if (window.location.hash === '#'+e.target.id) {
//do nothing
e.preventDefault();
}
else {
//the location will change - so store the scroll position
keepScroll = document.body.scrollTop;
}
}
window.addEventListener('hashchange', function(e) {
//the location has has changed
//if "keepScroll has been set
if (keepScroll !== false) {
//move scroll position to stored position
document.body.scrollTop = keepScroll;
//set "keepScroll" to false so that this behavior won't affect irrelevant links
keepScroll = false;
}
});
我遇到的問題是我使用平滑滾動行為,並且在單擊錨鏈接時 firefox 滾動位置會跳來跳去。 所以這里堆棧溢出沒有任何效果。 如果有人對我最近的方法感興趣:
下面是一個例子:
document.addEventListener('DOMContentLoaded', () => {
// store scroll position
let scrollTop = document.documentElement.scrollTop
window.addEventListener('scroll', () => scrollTop = document.documentElement.scrollTop)
window.addEventListener('hashchange', () => {
// disable scrolling
document.body.style.overflow = 'hidden'
// set current scroll position
window.scroll(0, scrollTop)
// enable scrolling
setTimeout(() => {
document.body.style.overflow = 'auto'
}, 10)
}, false)
// trigger hashchange event on page load
window.dispatchEvent(new Event('hashchange'))
})
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.