使滾動條不可見而不刪除它 - Windows瀏覽器

在我的Angularjs應用程序中，我有一個下拉菜單，當我點擊一個鏈接時出現。要停止滾動頁面上同時顯示菜單時我用overflow:hidden和類添加到身體的時候顯示菜單時：使滾動條不可見而不刪除它 - Windows瀏覽器

但是，使用overflow:hidden也從基於Windows的瀏覽器意味着整個頁面的變化完全消除垂直滾動條菜單打開時右邊（按滾動條的寬度）。

我可以在沒有完全移除滾動條的情況下停止滾動嗎？也許保持滾動條容器的位置，但隱藏手柄。

例看看https://fancy.com/ - 單擊登錄鏈接，模態應該會出現。滾動條句柄消失，但滾動條容器保持不變。我怎樣才能達到這個效果？

來源

2016-06-07 tommyd456

可以保證金右添加到身體時溢出隱藏 –

謝謝，但沒有達到預期的效果。該頁面仍然向右移動。 – tommyd456

我已經添加了所需效果的示例。 – tommyd456

看看https://fancy.com/ - 點擊登錄鏈接，模態應該出現。滾動條句柄消失，但滾動條容器保持不變。我怎樣才能達到這個效果？

看起來他們只是這樣做具有用於bodyoverflow-y: scroll將開始使用，然後當你點擊「登錄」一類fixed被添加到html元素。

然後該類影響頁面的主要內容容器，將其設置爲固定的位置：

.fixed #container-wrapper {position:fixed;left:0;width:100%; /*[…]*/

來源

2016-06-07 13:45:26 CBroe

將菜單放入包裝div，並設置overflow-x:和overflow-y:，因爲您需要此div。

來源

2016-06-07 13:37:39

正如我在評論中提到的，這可以很容易地嵌套的div完成。是的，它可以使用body標籤來完成，但這是我下面代碼的一個非常簡單的改變。你可以在這裏看到的效果：https://jsfiddle.net/udgj3ot5/

注：我懷疑你會直接從孩子的div被調用函數等等其他手段與指向比this可能需要使用其他的元素。

CSS

html, body { 
    padding:0; 
    margin:0; 
    width:100%; 
    height:100%; 
} 
div.parentDiv { /*Set this to the body if you don't want two divs*/ 
    width:inherit; 
    height:inherit; 
    overflow-y:scroll; 
}

的JavaScript

function toggleChildDiv(elem) { 
    if (elem.style.overflow == "hidden") { 
    elem.style.width = "auto"; 
    elem.style.height = "auto"; 
    elem.style.overflow = "visible" 
    } else { 
    elem.style.width = "100%"; 
    elem.style.height = "100%"; 
    elem.style.overflow = "hidden" 
    } 
}

HTML

<div class="parentDiv"> 
    <div onclick="toggleChildDiv(this)"> 
    YOUR PAGE CONTENT 
    </div> 
</div>

來源

2016-06-07 13:48:56

使滾動條不可見而不刪除它 - Windows瀏覽器

回答

相關問題