Safari 6，它不能正確調整大小（滾動條不會停留在底部）

如果您在Chrome，FF或IE（8）上測試了網站並調整了窗口大小（高度）中間黃色框內的內容。Safari 6，它不能正確調整大小（滾動條不會停留在底部）

我的問題是，在Safari中，它不能正確調整大小。（滾動條不停留在div的底部）

HTML：

<body> 
    <div id="message_box"> 

     <div id="header"> Header </div> 

     <div id="content"> 

      <ul id="msg_list"> 

       <li>Test file</li> 
       <li>Test file</li> 
       <li>Test file</li> 
       <li>Test file</li> <!-- ...and so on --> 

      </ul> 

     </div> 

     <div id="footer"> Footer </div> 

    </div> 
</body>

CSS：

html, body { 
    height: 100%; 
} 

#message_box { 
    width: 500px; 
    float: left; 
} 

#header { 
    width: 500px; 
    height: 50px; 
    background-color: #aaa; 
    text-align: center; 
} 

#content { 
    min-height: 150px; 
    width: 500px; 
    position: relative; 
    background-color: #ffa; 
    border: solid #cdd1d8; 
    border-width: 2px 0 2px 0; 
    overflow-y: scroll !important; 
    overflow-x: hidden; 
} 

#msg_list { 
    width: 100%; 
    position: absolute; 
    bottom: 100px; 
    margin-bottom: 50%; 
    left: 0; 
    display: block; 
    height: 1px; 
} 

#footer { 
    height: 300px; 
    padding: 10px; 
    background-color: #aaa; 
    text-align: center; 
}

的jQuery （v1.10.1）：

$(document).ready(auto_size); 

$(window).on("resize", auto_size); 

function auto_size() { 

    var body_content_msg = $("body").height(), 
     header_content_msg = $("#header").height(), 
     footer_content_msg = $("#footer").height(), 
     newHeight = body_content_msg - header_content_msg - footer_content_msg + "px"; 

    $("#content").css("height", newHeight); 
} 

$(document).ready(function(){ 

    $("#content").scrollTop($("#content")[0].scrollHeight); 

});

有人能解釋一下爲什麼這種情況發生在Safari瀏覽器，如何處理？

UPDATE：

你必須調整窗口向上/向下看到「測試文件//第一個消息//」消失在Safari。

這裏是一個Safari 6 bug Test：

... 的Safari 6將進行滾動，而是執行滾動之後，除非你重複調用$ scrollElement.scrollTop將報告不正確的值（）。 ...

來源

2013-08-28 aldanux

它在OS X上的Firefox（最新版本）和Safari（最新版本）上看起來是一樣的。這是否發生在PC上的Safari 5中？請記住，Safari for PC已停產，最新版本已超過一年。 – insertusernamehere

@insertusernamehere我在OS X/Safari上測試過6 – aldanux

在OS X/Safari 6.0.2中適用於我的工作正常 – Shivam

經過（很多）天試驗，我終於找到了解決方案。

我在CSS改變margin-bottom: 50%;到margin-bottom: 200px;

#msg_list { 
     width: 100%; 
     position: absolute; 
     bottom: 100px; 
     margin-bottom: 200px; 
     left: 0; 
     display: block; 
     height: 1px; 
}

而這一切！ :-)

無論如何，感謝所有幫助過我的人！

來源

2013-09-06 23:29:38 aldanux

找到下面的答案，將解決您的問題。

HTML + CSS保持不變。

$(document).ready(auto_size); 

$(window).resize(function() { 
    auto_size(); 
    $("#content").scrollTop($("#content")[0].scrollHeight); 
}); 



function auto_size() { 

    var body_content_msg = $("body").height(), 
     header_content_msg = $("#header").height(), 
     footer_content_msg = $("#footer").height(), 
     newHeight = body_content_msg - header_content_msg - footer_content_msg + "px"; 

    $("#content").css("height", newHeight); 
} 

$(document).ready(function() { 

    $("#content").scrollTop($("#content")[0].scrollHeight); 

});

基本上你需要再次打電話，每次你調整你的窗口時間滾動滾動條的功能。

享受:)

來源

2013-09-02 06:26:12 Thanos

嘿謝謝..但這不是我想要的或解決我的問題。問題是，當你滾動閱讀時，例如「// Last Message //」，然後調整窗口大小，再次轉到第一條消息，並且必須向上滾動以閱讀最後一條消息。 – aldanux

@aldanux我知道你的問題，因爲我能夠複製它。我提供的代碼解決了這個問題。無論您調整瀏覽器的大小，滾動條總是會停留在最後 - 您可以隨時閱讀最後一條消息。 – Thanos

@Thanos ..這個問題只在Safari 6中。*（我對這個測試過的瀏覽器沒有任何問題：Chrome，FF和IE 8 < - 令我吃驚的是:-)）所以問題是「爲什麼Safari中的這個bug我該如何解決這個問題？「。你的解決方案是好的，但我需要一個更好的（如果存在！）。如果有這個問題的解決方案，我的希望會逐漸消失（日復一日）... – aldanux

Safari 6，它不能正確調整大小（滾動條不會停留在底部）

回答

相關問題