Форум программистов, компьютерный форум, киберфорум
Наши страницы

HTML, CSS

Войти
Регистрация
Восстановить пароль
 
SanychBY
39 / 46 / 1
Регистрация: 04.06.2013
Сообщений: 1,532
#1

Прокрутка страницы - HTML, CSS

04.04.2014, 20:52. Просмотров 525. Ответов 3
Метки нет (Все метки)

Здравствуйте.
На странице я создаю что-то на подобии окна с помощью див.
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
display: block;
position: fixed;
width: 50%;
left: 24.5%;
padding: 5px;
top: 15%;
height: auto;
margin: 0 auto;
position: absolute;
right: auto;
z-index: 9900;
border: 1px solid #CDD3FF;
background-image: none;
background-color: #FFF;
border-radius: 10px;
box-shadow: 0 0 20px 10px rgba(255, 255, 255, 0.5);
font-family: 'Verdana',serif;
И маску для затемнения
CSS
1
2
3
4
5
6
7
8
9
10
11
display: block;
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 9000;
background-color: #000;
opacity: 0.5;
При этом мы спокойно можем скроллить страницу вверх и вниз. Как сделать так, чтобы скролинг "переключался" со страницы на окно: если окно не влазит, то прокрутка шла по его размеру высоты, а не размеру страницы? Спасибо.
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
04.04.2014, 20:52
Здравствуйте! Я подобрал для вас темы с ответами на вопрос Прокрутка страницы (HTML, CSS):

Прокрутка страницы - HTML, CSS
Как сделать, что бы если перехожу на другую страницу (в шапке кнопки типо главная, история) и нажав на историю, он открыл index.html и...

прокрутка страницы при динамическом изменении размеров div'a - HTML, CSS
Доброго времени суток! Есть небольшая проблемка на сайте, есть div с абсолютный позиционированием, в который загружаются картинки с...

Параллельная вертикальная прокрутка двух блоков и отдельная горизонтальная прокрутка одного из двух блоков - HTML, CSS
Всем привет! Помогите решить проблему, пожалуйста. Есть блок div, внутри которого два блока div (в каждом из них по одной таблице),...

Как сделать так, чтобы задний фон страницы не прокручивался вместе с передним фоном страницы ? - HTML, CSS
Как сделать так, чтобы задний фон страницы не прокручивался вместе с передним фоном страницы ?

Прокрутка - HTML, CSS
Привет всем. <div class="scroll" style="height: 200px"> <div class="pic"></div> <div class="pic"></div> <div class="pic"></div> ...

Прокрутка к центру - HTML, CSS
Всем привет кто подскажет от чего идет прокрутка к центру? ну вот допустим сайт http://excalibur-craft.ru имеет очень большой размер...

3
Mr Coder
365 / 365 / 82
Регистрация: 04.04.2013
Сообщений: 1,564
05.04.2014, 23:14 #2
SanychBY, такого нельзя сделать.
0
SanychBY
39 / 46 / 1
Регистрация: 04.06.2013
Сообщений: 1,532
05.04.2014, 23:19  [ТС] #3
Mr Coder, в вк сделано
0
Vladislav WebDev
324 / 214 / 76
Регистрация: 04.11.2012
Сообщений: 638
06.04.2014, 02:48 #4
Цитата Сообщение от Mr Coder Посмотреть сообщение
такого нельзя сделать.
Можно!
SanychBY, например с помощью джаваскрипта. Я приведу пример на jQuery для компактности:
HTML5
1
2
3
4
5
6
7
8
9
<div id="window">
    <div id="wrapper">
        <div id="content">
            <p>
                Some very long text
            </p>
        </div>
    </div>
</div>
CSS
1
2
3
4
5
6
7
#wrapper {
    background: #0cf;
    height: 500px;
    width: 300px;
    overflow: hidden;
    position: fixed;
}
Javascript
1
2
3
4
5
$("#window").height($("#content").height() * $(window).height()/$("#wrapper").height() - $("#wrapper").height())
 
$(document).scroll(function(e) {
    $("#wrapper").scrollTop($(this).scrollTop())
})
Живой пример в действии http://jsbin.com/qaxekewo/1/
0
06.04.2014, 02:48
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
06.04.2014, 02:48
Привет! Вот еще темы с ответами:

Прокрутка слайдами - HTML, CSS
привет! на лэндинге необходимо реализовать прокрутку контента слайдами, например как здесь...

Прокрутка контента - HTML, CSS
Здраствуйте! При клике по текстовому полю(скажем для ввода мейла) то может появится списочек с мейлами которые ты когдато вводил. ...

Прокрутка справа - HTML, CSS
Приветствую всех. Делаю первую в своей жизни верстку :) Столкнулся с проблемой : Появляется справа белая область , пустая , если я...

Горизонтальная прокрутка - HTML, CSS
Добрый день. У меня следующая проблема. Есть разметка &lt;div class=&quot;carousel&quot;&gt; &lt;a href=&quot;#&quot;&gt; &lt;img...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
4
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.