Как оставить скроллбар?
Добрый день! Есть скрипт для выдвижного блока. При открытом блоке в стиле для body и html присваивается overflow hidden, а у блока overflow auto/scroll. Как можно сделать, чтобы при открытом блоке скроллбар оставался у body, а не у блока, при этом прокрутка происходила самого открытого блока, но не body? Благодарю!
$(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);
});
});
});
<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;
}
.sidebar_toggled {
position: fixed;
left: 0;
width: 240px;
background: #ccc;
overflow: hidden;
}</style>
<div class="sidebar_icon"></div>
<div class="sidebar"></div>
|
LADYX,
без полноценного макета сложно понять |
рони,
приветствую вас! В смысле без полноценного? Так я же привел здесь весь и хтмл код и стиль. Что я упустил? |
Цитата:
|
Вот некий макет - насколько я понял задачу.
В диве есть горизонтальное переполнение. Если поставить 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>
|
$(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);
});
});
});
<div class="sidebar_icon"></div> <div class="sidebar">1<br />1<br />1<br /> 1<br />1<br />1<br /> 1<br />1<br />1<br /> 1<br />1<br />1<br /> 1<br />1<br />1<br /> 1<br />1<br />1<br /> 1<br />1<br />1<br /> 1<br />1<br />1<br /> 1<br />1<br />1<br /> 1<br />1<br />1<br /> 1<br />1<br />1<br /> 1<br />1<br />1<br /> 1<br />1<br />1<br /> 1<br />1<br />1<br /> 1<br />1<br />1<br /> 1<br />1<br />1<br /> 1<br />1<br />1<br /> 1<br />1<br />1<br /> 1<br />1<br />1<br /> 1<br />1<br />1<br /> 1<br />1<br />1<br /> 1<br />1<br />1<br /> 1<br />1<br />1<br /> 1<br />1<br />1<br /> 1<br />1<br />1<br /> 1<br />1<br />1<br /> 1<br />1<br />1<br /> 1<br />1<br />1<br /> 1<br />1<br />1<br /> 1<br />1<br />1<br /> 1<br />1<br />1<br /> 1<br />1<br />1<br /> 1<br />1<br />1<br /> 1<br />1<br />1<br /> 1<br />1<br />1<br /> 1<br />1<br />1<br /> 1<br />1<br />1<br /> </div> <body>1<br />1<br />1<br /> 1<br />1<br />1<br /> 1<br />1<br />1<br /> 1<br />1<br />1<br /> 1<br />1<br />1<br /> 1<br />1<br />1<br /> 1<br />1<br />1<br /> 1<br />1<br />1<br /> 1<br />1<br />1<br /> 1<br />1<br />1<br /> 1<br />1<br />1<br /> 1<br />1<br />1<br /> 1<br />1<br />1<br /> 1<br />1<br />1<br /> 1<br />1<br />1<br /> 1<br />1<br />1<br /> 1<br />1<br />1<br /> 1<br />1<br />1<br /> 1<br />1<br />1<br /> 1<br />1<br />1<br /> 1<br />1<br />1<br /> 1<br />1<br />1<br /> 1<br />1<br />1<br /> 1<br />1<br />1<br /> 1<br />1<br />1<br /> 1<br />1<br />1<br /> 1<br />1<br />1<br /> 1<br />1<br />1<br /> 1<br />1<br />1<br /> 1<br />1<br />1<br /> 1<br />1<br />1<br /> 1<br />1<br />1<br /> 1<br />1<br />1<br /> 1<br />1<br />1<br /> 1<br />1<br />1<br /> </body>
.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;
}
.sidebar_toggled {
position: fixed;
left: 0;
width: 240px;
background: #ccc;
overflow: hidden;
}
рони, у body есть скроллбар. Нужно, чтобы при открытии блока, этот скроллбар начинал прокручивать этот самый блок, а не body. Я хочу добавить сообщение, как это сделал Dilettante_Pro, чтобы была кнопка "Посмотреть", но у меня почему-то не получается. Dilettante_Pro, в диве возможно переполнение по вертикали, но зависеть это будет от высоты экрана. У body скроллбар всегда активен. |
В пост №5 активизировал скроллбар боди при помощи широкого div
e.preventDefault(); для скролла не работает рони знает способ дезактивации скролла Можно творить имитацию скролла дива Для создания работающего примера читайте Форматирование на javascript.ru |
LADYX,
[HTML run]код страницы целиком сюда[/HTML] |
Цитата:
|
Очевидно, имеется в виду, чтобы у боди отключить прокрутку по умолчанию и программно эмулировать прокрутку в диве
|
| Часовой пояс GMT +3, время: 09:20. |