Вот некий макет - насколько я понял задачу.
В диве есть горизонтальное переполнение. Если поставить overflow: scroll; - будет работать scrollbar.
У body скроллбар есть.
Но, поскольку у body нет переполнения, скроллбар неактивен, и им невозможно пользоваться для прокрутки содержимого div.
<!DOCTYPE html>
<html>
<head>
<title>Untitled Page</title>
<style>
.sidebar_icon
{
float: right;
width: 30px;
height: 30px;
margin: 20px;
position: relative;
cursor: pointer;
background: #000;
}
.sidebar
{
position: absolute;
top: 0;
left: -240px;
width: 240px;
overflow: hidden;
}
.sidebar_toggled
{
position: fixed;
left: 0;
width: 240px;
background: #ccc;
overflow: hidden;
}
</style>
<script src='http://code.jquery.com/jquery-latest.js'></script>
<script>
$(document).ready(function () {
$('.sidebar_icon, .sidebar_bg').click(function (e) {
e.preventDefault();
var tdata = {
".sidebar": "sidebar_toggled",
".sidebar_bg": "sidebar_bg_toggle",
".sidebar_icon-close": "icon-close-active",
".wrapper": "wrapper_push",
"body": "site-cache"
};
var remove = $(this).hasClass("sidebar_bg");
$.each(tdata, function (sel, cls) {
remove ? $(sel).removeClass(cls) : $(sel).toggleClass(cls);
});
});
$(window).on('scroll', function(e) {
e.preventDefault();
});
});
</script>
</head>
<body style="overflow:scroll">
<div style="width: 2000px">-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------</div>
<div class="sidebar_icon">
</div>
<div class="sidebar">hhkhkj hkjhkj xchxczhjkzxcvhk hkhzxkjhkjh khzxkjchkjzxc
zxclkjxzcklj zxjklzx cllj zxcljkjjlxzcccccccccccccjxvzcl
zxclhkllllllllllllllllllllll ljlzxcvjlvkzjlkvzjxlkxvzj xzjlxzvjvzlxjvzxljvxzl
xzkv;lzxvklzxkvl;vkzx;lzxvk;lzxvkl;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;vzxkzvklkxlxkzlkzxvlklvzxkzvlkzvlkzvxlkzvlkvzxvzkxlvzkxlvkzxlkzvxlkvzlvzklvzxklvzxklzvklvzklzvxklkvz
zvxjkzjvxkljvzxlk
zxvvzxjkjzxvljvzxlkjzx
</div>
</body>
</html>