我是FE,也是Fe

          前端來源于不斷的點滴積累。我一直在努力。

          統計

          留言簿(15)

          閱讀排行榜

          評論排行榜

          去掉頁面滾動條的兩種方法

          在做彈出層的時候,頁面內容比較高,通常監聽頁面的滾動位置重新計算彈出層在頁面中的位置。也許也可以用position:fixed去處理,IE6又不支持position:fixed,用javascript去算位置會出現操作不順暢的情況,感覺“一閃一閃”的。其實換種思路去做也許也不錯,何不直接干掉頁面的滾動條呢?qq控件的照片瀏覽,以及google+中的照片瀏覽給了一些思路。

          第一種,直接設置html標簽的溢出屬性。
          <!DOCTYPE html> 
          <html> 
          <head> 
              
          <meta charset="utf-8"> 
              
          <title>沒有滾動條的overlay</title> 
              
          <script type="text/javascript">
                  
          function go(){
                      document.documentElement.style.overflow
          ="hidden";
                      document.documentElement.style.paddingRight
          ="17px";
                      document.documentElement.style.width
          ="100%";
                  }
                  
          function reset(){
                      document.documentElement.style.overflow
          ="auto";
                      document.documentElement.style.paddingRight
          ="0px";
                      document.documentElement.style.width
          ="auto";
                  }
              
          </script>
          </head>
          <body>
          <div id="d" class="" style="height:1000px;background-color:gray;border:1px solid red; ">
              模擬頁面內容
              
          <div id="" class="" style="height:500px;">
                  
              
          </div>
              
          <input type="button" id="" name="" onclick="go()" value="去掉頁面滾動條" />
              
          <input type="button" id="" name="" onclick="reset()" value="恢復頁面滾動條" />
          </div>
          </body>
          </html>

          利用documentElement元素(就是根htmlDOM)的"擠"走滾動條。

          第二種:利用修正position:fixed方法中的div屬性
          <!DOCTYPE html>
          <html> 
          <head> 
              
          <meta charset="utf-8"> 
              
          <title>修復IE 6不支持position:fixed & 去掉頁面滾動條</title> 
          </head>
          <body>
          <style type="text/css">
                  html,body,#content
          {height:100%;overflow:auto;padding:0px;margin:0px;}
                  #fixed
          {position:fixed; right:20px; bottom:20px; border:solid 1px  blue;_position:absolute;}
              
          </style>
          <div id="content" class="">
              
          <div id="" class="" style="background-color:#ccc;height:1000px;">
                  模擬頁面內容
                  
          <div id="" class="" style="height:500px">
                      
                  
          </div>
                  
          <input type="button" id="" name="" value="去掉滾動條" onclick="document.getElementById('content').style.overflow='hidden';"/>
                  
          <input type="button" id="" name="" value="恢復滾動條" onclick="document.getElementById('content').style.overflow='auto';"/>
              
          </div>
          </div>
          <div id="fixed" class="">
              fixed content
          </div>
          </body>

          </html>
          因為這種修復方法中頁面的滾動條其實是div#content的滾動條,所以只要把他的滾動條去掉了。頁面也就沒有滾動條了。

          上述兩種方法思路都不錯,這樣可以放心的彈出層,只要計算一次位置就好,幾乎不影響用戶使用。




          posted on 2011-07-13 10:31 衡鋒 閱讀(3458) 評論(1)  編輯  收藏 所屬分類: Web開發

          評論

          # re: 去掉頁面滾動條的兩種方法 2011-07-13 17:41 censhao

          看見宿舍好多好多書,都當廢紙賣了,
          太可惜,所以我拿來淘寶出售,
          賣給有需要的人.

          有興趣的話 http://pcenshao.taobao.com/

          軟件工程
          UML和模式應用
          Unix Linux系統管理
          java面向對象編程
          asp.net 2.0 經典教程  回復  更多評論   

          主站蜘蛛池模板: 兴宁市| 崇州市| 元氏县| 双牌县| 海城市| 揭东县| 神木县| 盈江县| 扎鲁特旗| 无为县| 山东省| 西宁市| 汶川县| 义乌市| 关岭| 新野县| 平谷区| 蕲春县| 焉耆| 西畴县| 密山市| 周至县| 阿克苏市| 垫江县| 顺义区| 通化县| 蓬莱市| 张家界市| 乌拉特后旗| 和顺县| 梁平县| 临桂县| 武威市| 开原市| 乌拉特后旗| 宜宾县| 舒城县| 娄烦县| 定边县| 新化县| 怀宁县|