scrollTop＆scrollLeft不能在顯示上工作：隱藏的元素

我試圖在顯示它之前滾動隱藏的元素。這是我正在使用的代碼：scrollTop＆scrollLeft不能在顯示上工作：隱藏的元素

<div class="main"> 
    <div class="bg"> 
    </div> 
</div>

.main { 
    display:none; 
    position:abolsute; 
    width:250px;height:250px; 
    overflow:scroll; 
} 
.bg { 
    background: blue url(http://defaulttester.com/img/bg-landing-mario.jpg); 
    width:1200px; 
    height:800px; 
}

$(".main").scrollTop($(".bg").height()/2); 
$(".main").scrollLeft($(".bg").width()/2);

IT工作正常，如果它的表現，但如果它的display:hidden它將簡單不起作用。無論如何要避免這種情況並使其工作？

的jsfiddle：http://jsfiddle.net/dpjzJ/

來源

2013-06-11 Kivylius

使用visibility: hidden;或某類這樣，而不是：

.hide { 
    position: absolute !important; 
    top: -9999px !important; 
    left: -9999px !important; 
}

或者這（從樣板）：

.visuallyhidden { 
    position: absolute; 
    overflow: hidden; 
    clip: rect(0 0 0 0); 
    height: 1px; width: 1px; 
    margin: -1px; padding: 0; border: 0; 
}

一些與display: none;有頁面上沒有位置，你可能知道。

Check out this article on the subject.

來源

2013-06-11 15:24:43 dezman

必須有更好的方法來做到這一點？有黑客。我無法使用.show（）上的一個可見性：hidden;元件？ – Kivylius

是的，你應該使用toggleClass（）或addClass（）/ removeClass（）與我在這裏展示的其中一個類。或$（'stuff'）.css（'visibility'，'visible'）; – dezman

如果你的目標是剛剛設置scrollLeft和scrollTop的爲0（因爲這是我的目標），一個非常哈克解決方案是按照下列步驟操作：

獲取到的參考您要重置的元素。
獲取對元素父元素的引用。
從父項中移除元素。
將元素追加回父級。

即使它們不可見，scrollTop和scrollLeft現在也會設回0。

來源

2014-04-30 01:50:41 prashn64

function resetScroll(element) { 
    element.parentElement.replaceChild(element,element) 
}

這將設置scrollTop或scrollLeft爲0即使不顯示任何。

來源

2017-12-18 04:07:00 TerPro

scrollTop＆scrollLeft不能在顯示上工作：隱藏的元素

回答

相關問題