устарело ScrollController

[Endless 1496]

Небольшой ScrollController для тех, кто не умеет пользоваться колесом мыши кто ценит своё время и не хочет тратить его на прокрутку страницы.

Если будут вопросы по установке user(Script/Style) - напишу инструкцию. Все баги лучше отправлять в issue.

Demo.

 

[TheAndrey 16202]

14 часов назад, Predve4niy сказал:

Если будут вопросы по установке user(Script/Style)

UserJS давай 

[Endless 1496]

16 часов назад, Andrey сказал:

UserJS давай 

Подготовил инструкцию.

[Sheodar 1070]

@Predve4niy, Все еще ждем фиксика для подключения CSS

 

[Endless 1496]

28 минут назад, Sheodar сказал:

@Predve4niy, Все еще ждем фиксика для подключения CSS

 

Можешь пока сделать через userStyle. У меня, к сожалению, сегодня времени не будет :с

[Sheodar 1070]

1 час назад, Predve4niy сказал:

Можешь пока сделать через userStyle. У меня, к сожалению, сегодня времени не будет :с

Как скажешь  Так приятнее.

(чего-т с загрузкой картинок беда)

И да, лично для себя ненмного КСС поправил. Кнопка чуть больше, чуть подальше от края, и прозрачнее:

 

Нью(нет) стайл

 
	.rs-scroll-controller {
    position: fixed;
    bottom: 35px;
    left: 35px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    z-index: 100;
    background-color: transparent;
    opacity: .75
}
	.rs-scroll-btn {
    background-color: rgba(255, 255, 255, .5);
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 0;
    transform: rotate(0);
    line-height: 1.75;
    transition: .3s ease-in-out;
    transition-property: transform opacity;
    cursor: pointer;
    opacity: 1;
    visibility: visible;
}
	.rs-scroll-btn:focus {
    outline: none;
}
	.rs-scroll-btn[data-scroll-position=down] {
    transform: rotate(180deg);
}
	
.rs-scroll-btn[data-scroll-position=hide] {
    opacity: 0;
    visibility: hidden;
}
	.rs-scroll-btn[data-scroll-position=""] {
    opacity: 0;
    visibility: hidden;
}
	.rs-scroll-btn .fa {
    font-size: 27px;
    color: #333333;
}
@media (max-width: 799px) {
    .rs-scroll-controller {
        display: none;
        visibility: hidden;
    }
}

 

Изменено 17 марта 2018 пользователем Sheodar

[Sheodar 1070]

@Predve4niy, Вот маленько под себя переделал. Если будет желание сделать еще и такую версию (у меня тут чутка текст не всегда хочет меняться), то можно и такую добавить) Удобнее, чем выцеливать кнопочку мелкую (имхо).

UPD: ну лол, просидел почти весь день, но так сложно чет делать когда нифига не знаешь язык ни капли :с везде html части есть, а я вроде как не владелец сайта. На jss+css фиг сделаешь нормальную кнопочку  чтоб работала как хочешь :с Все темы за 12-14 год.

UPD2: день не прошел зря. Несмотря на все попытки гугла нифига мне не дать - кнопка "наверх" в вк готова. Измнения в части CSS уже дело каждого.

P.S. Вообще было интересно облазить тонну сайтов, поскольку знания цсс и скрипта было нулевым. Время незаметно улетело.

UPD3: Видео-инструкция (надеюсь не залочат?). Хз что ютуб делает с кач-вом видео. Но видать без фуллхыде монитора летсплеи не снимать  Но там и так понятно.

UPD4: Вынес в скрипте небольшой конфиг для настройки "под  себя". 

UPD5 (Last) : Теперь кнопка (область) появляется только после прокрутки. Раньше даже без листания слева была область которая меняла цвет при наведении. Теперь все работает как часы. Теперь конец  
 

Изменено 21 марта 2018 пользователем Sheodar

[TheAndrey 16202]

16 часов назад, Sheodar сказал:

Хз что ютуб делает с кач-вом видео.

У контакта ещё хуже - FullHD только дли избранных, а об поддержке 4K и говорить нечего. Тытуб сначала готовить видео в плохом качестве, постепенно появляются остальные варианты (фоновая обработка).

[Sheodar 1070]

6 часов назад, Andrey сказал:

У контакта ещё хуже - FullHD только дли избранных, а об поддержке 4K и говорить нечего. Тытуб сначала готовить видео в плохом качестве, постепенно появляются остальные варианты (фоновая обработка).

Проблема еще в мониторе моем, все же. И рендеринге, в итоге. 1440х900. А растягивать или тратить еще сутки как-то не хотелось. Просто ютуб именно картинку покоцал (mp4 на компе норм на фулл скрип даже после рендера, а на вот ютубе кубы). 

[TheAndrey 16202]

13 минут назад, Sheodar сказал:

И рендеринге

Делать вам нечего. Записали и загрузили сразу. Это только тытуберам нужен рендер, чтобы там всякие эффекты надобавлять.

[Sheodar 1070]

Только что, Andrey сказал:

Делать вам нечего. Записали и загрузили сразу. Это только тытуберам нужен рендер, чтобы там всякие эффекты надобавлять.

Музычка  

[TheAndrey 16202]

Опять же, тытуберам это только нужно. Главное - хорошее качество и чтобы понятно было.

[Sheodar 1070]

UPD. Было скучно, все-таки пофиксил, то что при первом скруле появилась рабочая область без рабочей кнопки. (код конечно кака, но и изначальный вид его подразумевал )

[Sheodar 1070]

(Сообщения, увы, все еще менять нельзя). Часто перехожу на "последний ответ", надоело что для появления кнопки нужно скролить. Теперь она может появится сразу при загрузке страницы, если высота ниже заданной благодаря вот такому вот костылику:

    if ((window.pageYOffset || document.documentElement.scrollTop) > switchingHeight && x === 1)
    {
        rsScrollController.initScrollController();
        x++;
    }

+Замените в стайлише строку 
height: 799px;
На:
height: 100vh; 

(+поменял стрелочки, скушна)

Изменено 19 апреля 2018 пользователем Sheodar