Перейти к публикации
Endless

устарело ScrollController

Рекомендованные сообщения

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

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

Demo.

 

  • Нравится 2
  • Против 1

Поделиться сообщением


Ссылка на сообщение
14 часов назад, Predve4niy сказал:

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

UserJS давай :O:

Поделиться сообщением


Ссылка на сообщение
28 минут назад, Sheodar сказал:

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

 

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

Поделиться сообщением


Ссылка на сообщение
1 час назад, Predve4niy сказал:

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

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

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

Снимок.PNG

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

 

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

 
	.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;
    }
}
 
Изменено пользователем Sheodar

Хочешь сменить мини-карту? Конвертируй свои старые маркера.

 

Поделиться сообщением


Ссылка на сообщение

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

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

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

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

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

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

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

Изменено пользователем Sheodar
  • Нравится 1
  • Одобряю 1

Хочешь сменить мини-карту? Конвертируй свои старые маркера.

 

Поделиться сообщением


Ссылка на сообщение
16 часов назад, Sheodar сказал:

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

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

Поделиться сообщением


Ссылка на сообщение
6 часов назад, Andrey сказал:

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

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


Хочешь сменить мини-карту? Конвертируй свои старые маркера.

 

Поделиться сообщением


Ссылка на сообщение
13 минут назад, Sheodar сказал:

И рендеринге

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

Поделиться сообщением


Ссылка на сообщение
Только что, Andrey сказал:

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

Музычка :( 


Хочешь сменить мини-карту? Конвертируй свои старые маркера.

 

Поделиться сообщением


Ссылка на сообщение

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

Поделиться сообщением


Ссылка на сообщение

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


Хочешь сменить мини-карту? Конвертируй свои старые маркера.

 

Поделиться сообщением


Ссылка на сообщение

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

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

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

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

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

Хочешь сменить мини-карту? Конвертируй свои старые маркера.

 

Поделиться сообщением


Ссылка на сообщение
Гость
Эта тема закрыта для публикации сообщений.

×
×
  • Создать...