Вам нужно подключить скрипты и стили (в шаблоне или с помощью движка):
- jquery.mCustomScrollbar.css
- jquery-ui.js
- jquery.mousewheel.min.js
- jquery.mCustomScrollbar.js
У элемента #content указать нужную высоту и overflow: 'auto', например:
#content {height: '300px'; overflow: 'auto';}
Каждый раз при обновлении контента вызывать:
$("#content").mCustomScrollbar();
Результат.
пример для консоли$("<link/>", {
rel: "stylesheet",
type: "text/css",
href: "http://www.enin.tpu.ru/1/xx/css/jquery.mCustomScrollbar.css"
}).appendTo("head");
$.getScript('http://code.jquery.com/ui/1.9.2/jquery-ui.js').done(function(script, textStatus) {
$.getScript('http://www.enin.tpu.ru/1/xx/js/jquery.mousewheel.min.js').done(function(script, textStatus) {
$.getScript('http://www.enin.tpu.ru/1/xx/js/jquery.mCustomScrollbar.js').done(function(script, textStatus) {
$("#content").css({height: '300px', overflow: 'auto'});
$("#content").mCustomScrollbar();
});
});
});