Question

在聊天中添加新消息时，聊天内容会刷新，添加新消息并将滚动条移至顶部。我试图让它保持最低点，但不能单独解决它。

这是在我的html页面中：

class SimpleContactPage_Controller extends Page_Controller {

    private static $allowed_actions = array(
        'finished'
    );

    public function finished() {
        ...
    }

    public function init() {

        parent::init();

        $translatedAction   = _t('SimpleContactPage.CONTROLLER', 'finished');
        $urlHandlers        = $this->config()->url_handlers;

        $translatedUrlHandlers = array(
            $translatedAction   => 'finished',
        );

        Config::inst()->update(
            $this->class, 
            'url_handlers', 
            $translatedUrlHandlers + $urlHandlers
        );

    }

}

这是在我的js文件中：

<script type="text/javascript">
<!--
var iChat_cfg = ["300", "15"];

var iChat_lang = ["Edit messages", "Write a new message", "iChat error", "Write your message.", "Your message text is too long.", "Agree", "Save Settings", "Clear DB", "Check for updates"];

function reFreshiChat()
{
iChatRefresh('site');
return false;
};

setInterval(reFreshiChat , iChat_cfg[1]*1000);
//-->

</script>
<div id="iChat-style">
   <div id="iChat-messages" align="left">
   <div class="chat">Message 1</div>
   <div class="chat">Message 2</div>
   <div class="chat">Message 3</div>
   <div class="chat">Message 4</div>
   <div class="chat">Message 5</div>
</div>
</div>

和css：

    function iChatRefresh(place)
{

    $.post(dle_root + "engine/modules/iChat/ajax/refresh.php", { action: "refresh", place: place }, function(data){

if(data != 'no need refresh'){

        $("#iChat-messages").html(data);

};


    });

    return false;
};

Answer 1

使用jQuery很简单。

$("#iChat-messages").scrollTop($("#iChat-messages")[0].scrollHeight);

使用纯粹的js，它看起来像：

var objDiv = document.getElementById("#iChat-messages");
objDiv.scrollTop = objDiv.scrollHeight;

将其放入重新加载div内容的方法中。

内容刷新后滚动到div的底部

1 个答案: