引子：
在項目開發過程中，使用iframe嵌套不同的頁面，通過菜單來控制頁面的切換展示。最開始使用的是show()和hide()方法來控制頁面的展示與隱藏，但是遇到嵌套的頁面高度不固定，
當嵌套頁面過高會出現滾動條，如果拉下滾動條到某個位置，然后切換頁面，再切換到上個頁面時滾動條就自動到頂部而不是在之前下拉到的位置，所以這就存在問題。
這里，自己簡單寫了一個示例頁面來更好的說明一下這個問題：
圖1 下拉頁面一的滾動條的展示情況 圖2 由頁面一切換到頁面二的展示情況
圖3 再由頁面二切換到頁面一的展示情況
另外，這里展示一下代碼（這里沒展示CSS樣式的部分）：
這里，使用的是show和hide方法。
原因解釋:
當從iframe1切換到iframe2時，在iframe1中會自動觸發一個滾動到頂部的事件，所以scrollTop會被置為0，這樣就無法記錄之前的滾動條位置了。
而show方法的結果就是display:block，hide方法的結果就是display:none，display=none就會造成頁面的重新渲染，當display=block頁面也會重新加載，所以scrollTop的值一直都是0.
所以切換頁面就相當於又重新刷新頁面，所以滾動條就一直置頂不能停留在原來滾動的位置。
所以這里想研究一下什么樣的隱藏和顯示方式不會導致這種問題呢？
首先，我們先研究一下幾種控制隱藏顯示的方法，我們知道display、visibility、z-index以及jquery中的show和hide方法都可以控制隱藏和顯示，哪他們有啥不同呢？
上面已經說明了jquery中的方法show和hide和display的關系。
1、display:none ——它不占據頁面空間，其內部元素的高度取到的值為0，visibility:hidden——它雖然隱藏但仍然占據原來的空間，只是視覺上看不到，但其內部元素的高度值都可以取得到。
2、display:none ——會引起頁面的重繪和回流，visibility:hidden——只引起頁面的重繪
（簡單說明一下：回流需要改變dom的結構，而重繪的dom結構不會發生變化只是需要重新渲染，這里可以自行了解：https://blog.csdn.net/u014541501/article/details/80166815）
通過上面的對比就可以明確只要不讓iframe頁面發生回流就不會導致滾動條自動刷新了。
通過更改上面的代碼：
就可以得到相要的效果（更改頁面滾動條的位置還是保留之前的位置！）。
此外，還有一種方式，z-index——控制層級順序的屬性。
z-index屬性用於指定元素的堆疊順序，說明一下z-index並不是控制元素顯示和隱藏的屬性，這里使用它是利用控制層級順序可以得到不同的展示頁面，
所以z-index不會產生回流和重繪問題，所以使用z-index控制頁面展示順序也不會導致iframe頁面的重新加載，所以滾動條位置也就不會自動更新了。
總結：使用visibility和z-index都可以解決滾動條自動重置的問題，但兩者的實現原理不同。綜合來看，visiblity的性能比display性能好些，可以優先使用visibility，但是具體情況還要根據需求具體分析！
歡迎大家批評指正和交流~~~~