Вариант переноса скролла в див
<!DOCTYPE html>
<html>
<head>
<title>Untitled Page</title>
<style>
.sidebar_icon
{
width: 30px;
height: 30px;
margin: 20px;
position: fixed;
left:90%;
top:30px;
cursor: pointer;
background: #000;
color:white;
font-size:12px;
}
.sidebar
{
position: absolute;
top: 0;
left: -240px;
width: 240px;
overflow: hidden;
}
.sidebar_toggled
{
position: fixed;
left: 0;
width: 240px;
height:240px;
background: #ccc;
overflow: hidden;
}
</style>
<script src='http://code.jquery.com/jquery-latest.js'></script>
<script>
$(document).ready(function () {
var left, top;
$('.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) {
left = $(document).scrollLeft();
top = $(document).scrollTop();
$('html').css('padding', top +'px ' + left + 'px');
$('.sidebar').scrollLeft(left);
$('.sidebar').scrollTop(top);
e.preventDefault();
});
});
</script>
</head>
<body style="overflow:scroll">
<div style= "height:500px"><div>
<div style="width: 2000px">--------------------------------------------------------------------------------------------------!==!-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------</div>
<div class="sidebar_icon">Click
</div>
<div class="sidebar">hhkhkj hkjhkj xchxczhjkzxcvhk hkhzxkjhkjh khzxkjchkjzxc
zxclkjxzcklj zxjklzx cllj zxcljkjjlxzcccccccccccccjxvzcl
zxclhkllllllllllllllllllllll ljlzxcvjlvkzjlkvzjxlkxvzj xzjlxzvjvzlxjvzxljvxzl
xzkv;lzxvklzxkvl;vkzx;lzxvk;lzxvkl;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;vzxkzvklkxlxkzlkzxvlklvzxkzvlkzvlkzvxlkzvlkvzxvzkxlvzkxlvkzxlkzvxlkvzlvzklvzxklvzxklzvklvzklzvxklkvz
zvxjkzjvxkljvzxlk
zxvvzxjkjzxvljvzxlkjzx
zxvvzxjkjzxvljvzxlkjzx
zxvvzxjkjzxvljvzxlkjzx
zxvvzxjkjzxvljvzxlkjzx
zxvvzxjkjzxvljvzxlkjzx
zxvvzxjkjzxvljvzxlkjzx
zxvvzxjkjzxvljvzxlkjzx
zxvvzxjkjzxvljvzxlkjzx
zxvvzxjkjzxvljvzxlkjzx
zxvvzxjkjzxvljvzxlkjzx
zxvvzxjkjzxvljvzxlkjzx
zxvvzxjkjzxvljvzxlkjzx
zxvvzxjkjzxvljvzxlkjzx
zxvvzxjkjzxvljvzxlkjzx
</div>
</body>
</html>
