Чат внутри: <div id=leftdiv class=header-body2> Загрузка ... </div> css: .header-body2 {position:absolute; overflow-y:scroll; padding:20px 20px 50px 10px; left:11px; right:295px; top:47px; bottom:100px; border:0px gray solid;border-radius: 3px;box-shadow: inset 0 1px 1px rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.15), 0 1px 3px rgba(0,0,0,.15); background: rgba(185, 182, 182, 0.61);}
Стили: #mcs_container{position:relative; top:140px; margin:0 0 0 40px; width:260px; height:600px; padding:0 10px; border-top:1px solid #333; border-bottom:1px solid #333;} #mcs_container .customScrollBox{position:relative; height:100%; overflow:hidden;} #mcs_container .customScrollBox .container{position:relative; width:240px; top:0; float:left;} #mcs_container .customScrollBox .content{clear:both;} #mcs_container .customScrollBox .content p{padding:0 5px; margin:10px 0; color:#fff; font-family:Verdana, Geneva, sans-serif; font-size:13px; line-height:20px;} #mcs_container .customScrollBox .content p.alt{padding:10px 5px; margin:10px 0; color:#fff; font-family:Georgia, "Times New Roman", Times, serif; font-size:17px; line-height:19px; color:#999;} #mcs_container .customScrollBox img{border:5px solid #fff;} #mcs_container .dragger_container{position:relative; width:2px; height:525px; float:left; margin:40px 0 0 10px; background:#000; cursor:pointer -moz-border-radius:2px; -khtml-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; cursor:s-resize;} #mcs_container .dragger{position:absolute; width:2px; height:60px; background:#999; text-align:center; line-height:60px; color:#666; overflow:hidden; cursor:pointer; -moz-border-radius:2px; -khtml-border-radius:2px; -webkit-border-radius:2px; border-radius:2px;} #mcs_container .dragger_pressed{position:absolute; width:4px; margin-left:-1px; height:60px; background:#999; text-align:center; line-height:60px; color:#666; overflow:hidden; -moz-border-radius:4px; -khtml-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; cursor:s-resize;} #mcs_container .scrollUpBtn,#mcs_container .scrollDownBtn{position:absolute; display:inline-block; width:14px; height:15px; margin-right:12px; text-decoration:none; right:0; filter:alpha(opacity=20); -moz-opacity:0.20; -khtml-opacity:0.20; opacity:0.20;} #mcs_container .scrollUpBtn{top:16px; background:url(mcs_btnUp.png) center center no-repeat;} #mcs_container .scrollDownBtn{bottom:12px; background:url(mcs_btnDown.png) center center no-repeat;} #mcs_container .scrollUpBtn:hover,#mcs_container .scrollDownBtn:hover{filter:alpha(opacity=60); -moz-opacity:0.60; -khtml-opacity:0.60; opacity:0.60;} HTML: <div id="mcs_container"> <div class="customScrollBox"> <div class="container"> <div class="content"> Содержимое </div> </div> <div class="dragger_container"> <div class="dragger"></div> </div> </div> <a href="#" class="scrollUpBtn"></a> <a href="#" class="scrollDownBtn"></a> </div> Js: <script src="super.mpchat.ru/jquery.easing.1.3.js</script> <script src=" super.mpchat.ru/jquery.mousewheel.min.j</script> <script src="super.mpchat.ru/jquery.mCustomScrollbar.js</script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script> </script> <!-- Содержимое для вывода, если Javascript отключен --> <noscript> <style type="text/css"> #mcs_container .customScrollBox,#mcs2_container .customScrollBox,#mcs3_container .customScrollBox,#mcs4_container .customScrollBox,#mcs5_container .customScrollBox{overflow:auto;} #mcs_container .dragger_container,#mcs2_container .dragger_container,#mcs3_container .dragger_container,#mcs4_container .dragger_container,#mcs5_container .dragger_container{display:none;} </style> </noscript> <script> $(window).load(function() { mCustomScrollbars(); }); function mCustomScrollbars(){ /* Параметры плагина CustomScrollbar: 1) Тип прокрутки (значение: "vertical" или "horizontal") 2) Величина перемещения со сглаживанием (0 - сглаживание не используется) 3) Тип сглаживания перемещений 4) Дополнительное место снизу, только для вертикального типа прокрутки (минимальное значение: 1) 5) Настройка высоты/ширины панели прокрутки (значение: "auto" или "fixed") 6) Поддержка прокрутки колесиком мыши (значение: "yes" или "no") 7) Прокрутка с помощью клавиш (значения: "yes" или "no") 8) Скорость прокрутки (значение: 1-20, 1 соответствует самой медленной скорости) */ $("#mcs_container").mCustomScrollbar("vertical",400,"easeOutCirc",1.05,"auto","yes","yes",10); } /* Функция для обхода ошибки с 10000 px для jquery.animate */ $.fx.prototype.cur = function(){ if ( this.elem[this.prop] != null && (!this.elem.style || this.elem.style[this.prop] == null) ) { return this.elem[ this.prop ]; } var r = parseFloat( jQuery.css( this.elem, this.prop ) ); return typeof r == 'undefined' ? 0 : r; } /* Функция для динамической загрузки содержания */ function LoadNewContent(id,file){ $("#"+id+" .customScrollBox .content").load(file,function(){ mCustomScrollbars(); }); } </script>
90 •