Фиксированная позиция просмотра содержимого после добавления нового сообщения (элемент)

Задача:Фиксированная позиция просмотра содержимого после добавления нового сообщения (элемент)

Сделать чат на Skype в HTML.

Проблема:

Нет прокрутки содержимого после добавления нового сообщения.

Описание:

Существует общая структура сайта: заголовок, содержание и колонтитул. Необходимо, чтобы содержимое «скрывалось» под заголовком, но в видимой части окна оставалось только часть содержимого (ниже (история сообщений в Skype)). Когда вы добавляете новое сообщение, содержимое должно прокручиваться до высоты этого, новые сообщения, и сообщение должно появляться внизу центрального блока сайта (контента), но не должно проходить под нижним колонтитулом.

В этом случае он остается возможной прокруткой.

HTML:

<body> 
<div id="header">HEADER</div> 
<div id="sidebar" class="f_left"> 
    <div>1</div> 
    <div>2</div> 
    <div>3</div> 
    <div>4</div> 
</div> 
<div id="container" class="f_right"> 
    <div id="wrap3"> 
    <div id="wrap2"> 
     <div id="wrap1"> 
     <div id="content"> 
      <div id="im_nav_wrap">asdasdasdasd</div> 
      <div id="im_content"> 
      <div class="im_rows_wrap"> 
      <div id="im_rows" class="im_peer_rows"> 
       <div class="mes">sddsfsdfsdfsdf</div> 
       <div class="mes">sdfdfsdf</div> 
       <div class="mes">fsdfsdf</div> 
       <div class="mes">sdfsdf</div> 
       <div class="mes">fsdfsdf</div> 
       <div class="mes">fdsfsdfsdf</div> 
       <div class="mes">fdsfsdfsdf</div> 
      </div></div> 
      </div> 
      <div id="im_footer_wrap"> 
      <textarea name="dialog" id="im_textarea" cols="50" rows="6"></textarea> 
      <button onclick="IM.send(this);">submit</button> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 
</div>

CSS:

body { 
    width: 980px; 
    margin: 0 auto; 
} 
#header { 
    top: 0; 
    z-index: 100; 
    text-align: center; 
    width: 980px; 
    position: fixed; 
    height: 40px; 
    background: #cdcdcd; 
} 
#sidebar { 
    top: 60px; 
    width: 200px; 
    height: 100px; 
    background: #666; 
    position: fixed; 
} 
.f_right { 
    width: 600px; 
    float: right; 
} 
#content { 

} 
#im_nav_wrap { 
    position: fixed; 
    top: 40px; 
    z-index: 100; 
    width: 400px; 
    height: 70px; 
    background: #ff0ccc; 
} 
#im_content { 
    padding: 120px 0 150px ; 
} 
#im_rows { 

} 
.im_rows_wrap { 
    position: relative; 
} 
#im_rows { 
    position: absolute; 
    bottom: 80px; 
    width: inherit; 
} 
.mes { 
    width: 200px; 
    padding: 10px; 
    background: #f6f6f6; 
    margin-top: 10px; 
} 
#im_footer_wrap { 
    height: 100px; 
    width: 300px; 
    position: fixed; 
    bottom: 20px; 
}

JS:

$(document).ready(function() { 
    $('.im_rows_wrap').height($('#im_rows').height()); 
}); 

IM = { 
    send: function(el) { 
    var ta = $(el).prev('textarea').val(); 

    if (ta) { 
     $('#im_rows').append('<div class="mes">' + ta + '</div>'); 

     $('.im_rows_wrap').height($('.im_rows_wrap').height() + $(".mes").last().height()) 
    } 
    } 
};

источник

2013-09-27 RomanGorbatko

Так что вы хотите что-то вроде:

http://jsfiddle.net/CLzfW/7/

Используя немного JQuery

$('.button').click(function(e){ 
    e.preventDefault(); 
    $('.expander').slideToggle(); 
    $('html, body').animate({scrollTop: $(document).height()}, 'slow'); 
});

Он прокручивает в нижней части DIV на качестве события мыши (например, кнопка мыши, новое сообщение) и вы также нужна полоса прокрутки?

источник

2013-09-27 09:09:09

Исключено. Вы не можете использовать автоматическую прокрутку JQuery. В будущем это создаст большую проблему. Целесообразно делать все в чистой CSS + манипуляции с высокими контейнерами на JS. – RomanGorbatko

Я бы не знал, с чего начать делать это без какого-либо JavaScript. –

Фиксированная позиция просмотра содержимого после добавления нового сообщения (элемент)

ответ

Смежные вопросы