<rt id="bn8ez"></rt>
<label id="bn8ez"></label>

  • <span id="bn8ez"></span>

    <label id="bn8ez"><meter id="bn8ez"></meter></label>

    我是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 衡鋒 閱讀(3467) 評論(1)  編輯  收藏 所屬分類: Web開發

    評論

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

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

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

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

    主站蜘蛛池模板: 日本无卡码免费一区二区三区| 亚洲视频在线免费| 日韩免费观看视频| 亚洲一级毛片中文字幕| 99亚洲乱人伦aⅴ精品| 51午夜精品免费视频| 桃子视频在线观看高清免费完整| 国产免费观看青青草原网站| 亚洲av永久无码精品古装片| 国产日本亚洲一区二区三区| 久久久受www免费人成| 一二三四在线观看免费高清中文在线观看| www国产亚洲精品久久久| 亚洲图片一区二区| 美女视频黄频a免费观看| 114一级毛片免费| 亚洲精品国自产拍在线观看| 国产成人精品日本亚洲18图| 永久免费av无码不卡在线观看| 亚洲sss综合天堂久久久| 免费看的一级毛片| 亚洲国产精品久久久久秋霞影院| 99热亚洲色精品国产88| 午夜视频在线在免费| 亚洲福利秒拍一区二区| 嫩草在线视频www免费观看| 亚洲乱码中文字幕手机在线 | 亚洲精品国产成人| 99在线精品免费视频九九视| 亚洲一久久久久久久久| 青青草无码免费一二三区| 亚洲综合伊人久久综合| 看Aⅴ免费毛片手机播放| 欧洲精品成人免费视频在线观看| 亚洲日本中文字幕| 在线成人a毛片免费播放 | 国产亚洲人成在线影院| 亚洲国产精品无码久久久秋霞2| 日韩免费码中文在线观看| 亚洲免费网站观看视频| 一区二区三区免费在线观看|