Форум

LADYX · #1 (**permalink**) 20.04.2017, 21:50

Добрый день! Есть скрипт для выдвижного блока. При открытом блоке в стиле для 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>

рони · #2 (**permalink**) 21.04.2017, 13:48

LADYX,
без полноценного макета сложно понять

LADYX · #3 (**permalink**) 21.04.2017, 14:48

рони,
приветствую вас! В смысле без полноценного? Так я же привел здесь весь и хтмл код и стиль. Что я упустил?

рони · #4 (**permalink**) 21.04.2017, 16:06

Сообщение от LADYX

В смысле без полноценного?

такого чтоб можно было увидеть проблему и проверить решение, если такое будет.

Dilettante_Pro · #5 (**permalink**) 21.04.2017, 16:13

Вот некий макет - насколько я понял задачу.
В диве есть горизонтальное переполнение. Если поставить 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>

LADYX · #6 (**permalink**) 21.04.2017, 17:12

$(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 скроллбар всегда активен.

Dilettante_Pro · #7 (**permalink**) 21.04.2017, 17:45

В пост №5 активизировал скроллбар боди при помощи широкого div
e.preventDefault(); для скролла не работает
рони знает способ дезактивации скролла

Можно творить имитацию скролла дива

Для создания работающего примера читайте Форматирование на javascript.ru

рони · #8 (**permalink**) 21.04.2017, 17:51

LADYX,

[HTML run]код страницы целиком сюда[/HTML]

рони · #9 (**permalink**) 21.04.2017, 18:11

Сообщение от LADYX

этот скроллбар начинал прокручивать этот самый блок, а не body.

не понимаю

Dilettante_Pro · #10 (**permalink**) 21.04.2017, 18:20

Очевидно, имеется в виду, чтобы у боди отключить прокрутку по умолчанию и программно эмулировать прокрутку в диве

Форум

Справочник

Discord чат

Курсы javascript