Посекционный скроллинг

@духачевский · Регистрация: 13.11.2014

Студворк — интернет-сервис помощи студентам

Всем привет друзья. Вчера столкнулся с нетривиальной для меня задачей. Помогите пожалуйста разобраться как проще реализовать задуманное дизайнером. Имеется лендинг на первом экране которого размещается видео, оно должно быть на всю высоту экрана, далее следует остальной контент. Требуется при первом открытии страницы переходить к дальнейшему контенту не скроллингом а по событию wheel, т.е только пользователь должен начать крутить колесико и попадать на остальной контент только плавно, и наоборот находясь на секции на одну ниже чем это самое видео попасть на вверх нужно не скроллингом а так же при первой попытке начать крутить колесико мыши вверх.

Я теоретически это представляю так. В начале лендинга имеется две секции, одна с видео и одна ниже с другим контентом, каждой секции присваиваю id и затем отлавливаю событие wheel на каждой из этой секции, после того как будет поймано событие перемещать body по оси Y используя transform:translate3d() на 100% вверх или вниз. Но вот как это прописать кодом, я не понимаю так как в js не силен.

Помогите пожалуйста реализовать задуманное

Слепил преблизительную разметку тут http://codepen.io/bogdanovich/pen/oxZXze

Заранее всем большое спасибо)

@Shakalaka · 19.03.2016, 16:00

духачевский, http://alvarotrigo.com/fullPage/

@духачевский · 19.03.2016, 16:12 **[ТС]**

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

@Shakalaka · 19.03.2016, 19:12

HTML5
1
2
3
4
5
6
<div class="slide">
    <div class="slide__inner">
        нажмите стрелку "вниз"
    </div>
</div>
<div class="rest">нажмите стрелку "вверх"</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
*{
  box-sizing:border-box;
}
html, body{
  margin:0;
  padding:0;
}
.slide{
  background:#333;
  overflow:hidden;
  transition:height .5s;
  color:#fff;
  text-align:center;
  font-size:50px;
  position:relative;
}
.slide__inner{
  position:absolute;
  left:0;
  right:0;
  top:0;
  bottom:0;
}
.rest{
  background:#0f0;
  height:2000px;
  text-align:center;
  font-size:50px;
}

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
var HEIGHT = getWindowHeight();
var SLIDE = document.querySelector(".slide");
 
function getWindowHeight(){
    return window.innerHeight;
}
 
function watchScroll(direction){
    if(direction == "bottom"){
        SLIDE.style.height = "0";
        document.body.style.overflow = "visible";
    }
    else{
        SLIDE.style.height = HEIGHT + "px";
        document.body.style.overflow = "hidden";
    }
}
 
function init(){
    SLIDE.style.height = HEIGHT + "px";
}
 
 
document.onwheel = function(e){
    if(e.deltaY > 0 && window.pageYOffset == 0){
        watchScroll("bottom");
    }
    else if(e.deltaY < 0 && window.pageYOffset == 0){
        watchScroll("top");
    }
}
 
document.onkeydown = function(e){
    var code = e.which || e.keyCode
    if(code == 40 && window.pageYOffset == 0){
        watchScroll("bottom");
    }
    else if(code == 38 && window.pageYOffset == 0){
        watchScroll("top");
    }
}
 
window.onload = function(){
    if(window.pageYOffset == 0){
        document.body.style.overflow = "hidden";
        init();
    }
}
window.onresize = init;

http://codepen.io/anon/pen/grmavp
У меня нет мышки, так что проверить работоспособность wheel я не могу...
Сделал по нажатию стрелок на клаве. Плюс на touch устройствах это работать не будет, нужно доделывать

А вообще затея, честно говоря, дебильная...

@духачевский · 19.03.2016, 19:22 **[ТС]**

Спасибо вам большое это как раз то что я и хотел) А почему вы считаете что затея дибильная? Дизайнер решил что так все будет выглядеть круто)

@Shakalaka · 19.03.2016, 19:40

Сообщение от духачевский

А почему вы считаете что затея дибильная?

Люди проводят исследования, книги пишут, все чтобы улучшить юзабилити сайтов, а с такими вот "дизайнами" человек должен догадываться что же ему нужно сделать... Скролл то появляется, то исчезает. Вот у меня, допустим, дома мышки нет вообще, получается в вашем сайте я бы дальше первого слайда не дошел бы.. Опять же, под touch устройства нужны дополнительные пляски с бубном.

@духачевский · 20.03.2016, 19:13 **[ТС]**

Да я понимаю о чём вы говорите. Но я навесил на body overflow:hidden, что бы скролл не выскакивал, и везде все работает, даже на ноутбуке попробовал тачпадом крутить, тоже все в порядке. Я еще проверю на других устройствах и если будут косяки то не буду это использовать. Еще раз большое спасибо)

Новые блоги и статьи Все статьи Все блоги /
Отправка уведомления на почту при изменении наименования справочника Maks 24.03.2026 Программная отправка письма электронной почты на примере изменения наименования типового справочника "Склады" в конфигурации БП3. Перед реализацией необходимо выполнить настройку системной учетной. . .	модель ЗдравоСохранения 5. Меньше увольнений- больше дохода! anaschu 24.03.2026 Теперь система здравосохранения уменьшает количество увольнений. 9TO2GP2bpX4 a42b81fb172ffc12ca589c7898261ccb/ https:/ / rutube. ru/ video/ a42b81fb172ffc12ca589c7898261ccb/ Слева синяя линия -. . .	Midnight Chicago Blues kumehtar 24.03.2026 Такой Midnight Chicago Blues, знаешь?. . Когда вечерние улицы становятся ночными, а ты не можешь уснуть. Ты идёшь в любимый старый бар, и бармен наливает тебе виски. Ты смотришь на пролетающие. . .	Контроль уникальности заводского номера - вариант №2 Maks 24.03.2026 В отличие от предыдущего варианта добавлено прерывание циклов, также добавлены новые переменные для сохранения контекста ошибки перед прерыванием цикла: Процедура ПередЗаписью(Отказ, РежимЗаписи,. . .
SDL3 для Desktop (MinGW): Вывод текста со шрифтом TTF с помощью библиотеки SDL3_ttf на Си и C++ 8Observer8 24.03.2026 Содержание блога Финальные проекты на Си и на C++: finish-text-sdl3-c. zip finish-text-sdl3-cpp. zip	Жизнь в неопределённости kumehtar 23.03.2026 Жизнь — это постоянное существование в неопределённости. Например, даже если у тебя есть список дел, невозможно дойти до точки, где всё окончательно завершено и больше ничего не осталось. В принципе,. . .	Модель здравоСохранения: работники работают быстрее после её введения. anaschu 23.03.2026 geJalZw1fLo Корпорация до введения программа здравоохранения имела много невыполненных работниками заданий, после введения программы количество заданий выросло. Но на выплатах по больничным это. . .	Контроль уникальности заводского номера - вариант №1 Maks 23.03.2026 Алгоритм контроля уникальности заводского (или серийного) номера на примере нетипового документа выдачи шин для спецтехники с табличной частью, разработанного в конфигурации КА2. Данные берутся из. . .

@духачевский 0 / 0 / 0 Регистрация: 13.11.2014 Сообщений: 57

	Посекционный скроллинг 19.03.2016, 15:38. Показов 3002. Ответов 6 Метки нет (Все метки) Всем привет друзья. Вчера столкнулся с нетривиальной для меня задачей. Помогите пожалуйста разобраться как проще реализовать задуманное дизайнером. Имеется лендинг на первом экране которого размещается видео, оно должно быть на всю высоту экрана, далее следует остальной контент. Требуется при первом открытии страницы переходить к дальнейшему контенту не скроллингом а по событию wheel, т.е только пользователь должен начать крутить колесико и попадать на остальной контент только плавно, и наоборот находясь на секции на одну ниже чем это самое видео попасть на вверх нужно не скроллингом а так же при первой попытке начать крутить колесико мыши вверх. Я теоретически это представляю так. В начале лендинга имеется две секции, одна с видео и одна ниже с другим контентом, каждой секции присваиваю id и затем отлавливаю событие wheel на каждой из этой секции, после того как будет поймано событие перемещать body по оси Y используя transform:translate3d() на 100% вверх или вниз. Но вот как это прописать кодом, я не понимаю так как в js не силен. Помогите пожалуйста реализовать задуманное Слепил преблизительную разметку тут http://codepen.io/bogdanovich/pen/oxZXze Заранее всем большое спасибо) 0

@Shakalaka 653 / 556 / 322 Регистрация: 27.01.2015 Сообщений: 1,374
	19.03.2016, 16:00
	духачевский, http://alvarotrigo.com/fullPage/ 0

@духачевский 0 / 0 / 0 Регистрация: 13.11.2014 Сообщений: 57
	19.03.2016, 16:12 [ТС]
	Спасибо, но такие плагины мне не подходят, я уже пробовал. Я забыл указать на то что после перехода на основной контент после видео дальше должен работать стандартный скролл 0

@духачевский 0 / 0 / 0 Регистрация: 13.11.2014 Сообщений: 57
	19.03.2016, 19:22 [ТС]
	Спасибо вам большое это как раз то что я и хотел) А почему вы считаете что затея дибильная? Дизайнер решил что так все будет выглядеть круто) 0

@духачевский 0 / 0 / 0 Регистрация: 13.11.2014 Сообщений: 57
	20.03.2016, 19:13 [ТС]
	Да я понимаю о чём вы говорите. Но я навесил на body overflow:hidden, что бы скролл не выскакивал, и везде все работает, даже на ноутбуке попробовал тачпадом крутить, тоже все в порядке. Я еще проверю на других устройствах и если будут косяки то не буду это использовать. Еще раз большое спасибо) 0

Посекционный скроллинг

Решение