Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 01.04.2018, 13:25
Аватар для LADYX
Профессор
Отправить личное сообщение для LADYX Посмотреть профиль Найти все сообщения от LADYX
 
Регистрация: 19.02.2015
Сообщений: 217

Скроллбар Gemini Scrollbar
Добрый день! Пытаюсь подключить Gemini Scrollbar (https://noeldelgado.github.io/gemini-scrollbar/), но по какой причине он не работает. Посмотрите, пожалуйста, что я делаю не так? Спасибо!
window.onload = function() {
      var sidebar = new GeminiScrollbar({
        element: document.querySelector('.sidebar-scrollbar'),
        onResize: function() {
          console.log('sidebar resized');
        }
      }).create();
      var main = new GeminiScrollbar({
        element: document.querySelector('.main-scrollbar'),
        onResize: function() {
          console.log('main resized');
        }
      }).create();
    };

<style>
* {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    html, body {
      overflow: hidden;
    }
    body {
      margin: 0;
      padding: 0;
    }
    img {
      max-width: 100%;
    }
    ul {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .fake-image {
      position: relative;
      padding-top: 9em;
      margin-bottom: 1rem;
      background-color: rgba(0,0,0,.05);
      box-shadow: 0 0 0 1px rgba(0, 0, 0, .1);
      border-radius: 3px;
    }
    .fake-image::after {
      content: '.';
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      color: #ccc;
    }
    /* sidebar */
    aside {
      position: absolute;
      top: 0;
      left: 0;
      width: 16rem;
      height: 100vh;
      box-shadow: 0 0 2rem rgba(0,0,0,.3);
    }
    aside header {
      height: 4rem;
      background-color: #CA9EFF;
    }
    .logo {
      padding: 1.2rem 2rem 0;
    }
    /* sidebar scrollbar wrapper */
    .sidebar-scrollbar {
      position: relative;
      height: calc(100vh - 4rem);
      overflow: auto;
    }
    .sidebar-content {
      padding: 1.5rem 1.5rem .5rem;
    }
    /* main content */
    .main {
      margin-left: 16rem;
      height: 100vh;
    }
    /* main scrollbar wrapper */
    .main-scrollbar {
      height: 100%;
      overflow: auto;
    }
    .main .hero {
      padding: 14rem 4rem;
      background-image: linear-gradient(-90deg, #CA9EFF, #9EFFF4);
    }
    .main .content {
      padding: 4rem;
    }
    .main .fake-image {
      padding-top: 24em;
    }
    .description-text {
      margin-bottom: 2em;
    }
    /* gemini-scrollbar override styles */
    .gm-scrollbar {
      border-radius: 4px;
    }
    .gm-scrollbar.-vertical {
      width: 8px;
    }
    .gm-scrollbar .thumb {
      background-color: rgba(111, 87, 140, .4);
    }
    .gm-scrollbar .thumb:hover,
    .gm-scrollbar .thumb:active {
      background-color: rgba(111, 87, 140, .6);
    }
</style>
<link href="https://raw.githubusercontent.com/noeldelgado/gemini-scrollbar/master/gemini-scrollbar.css" rel="stylesheet"/>
<script src="https://raw.githubusercontent.com/noeldelgado/gemini-scrollbar/master/index.js"></script>
  <div class="main">
    <div class="main-scrollbar">
      <div class="hero">
        <h1>Lorem ipsum dolor sit amet</h1>
      </div>
      <div class="content">
        <p class="description-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore reprehenderit harum corrupti. Quibusdam nulla, dicta cupiditate reprehenderit, ullam in beatae, qui aperiam natus repellat dolor omnis ea amet modi autem.</p>
        <div class="col">
          <div class="row">
            <div class="fake-image"></div>
          </div>
          <div class="row">
            <div class="fake-image"></div>
          </div>
          <div class="row">
            <div class="fake-image"></div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <aside>
    <header>
      <div class="logo">
        <h1>Hi</h1>
      </div>
    </header>
    <div class="sidebar-scrollbar">
      <div class="sidebar-content">
        <ul>
          <li class="fake-image"></li>
          <li class="fake-image"></li>
          <li class="fake-image"></li>
          <li class="fake-image"></li>
          <li class="fake-image"></li>
          <li class="fake-image"></li>
          <li class="fake-image"></li>
          <li class="fake-image"></li>
          <li class="fake-image"></li>
          <li class="fake-image"></li>
          <li class="fake-image"></li>
          <li class="fake-image"></li>
          <li class="fake-image"></li>
          <li class="fake-image"></li>
          <li class="fake-image"></li>
        </ul>
      </div>
    </div>
  </aside>
Ответить с цитированием
  #2 (permalink)  
Старый 01.04.2018, 13:45
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от LADYX
Посмотрите, пожалуйста, что я делаю не так?
строка 102 и 103 укажите ссылки правильно
Ответить с цитированием
  #3 (permalink)  
Старый 01.04.2018, 13:54
Аватар для LADYX
Профессор
Отправить личное сообщение для LADYX Посмотреть профиль Найти все сообщения от LADYX
 
Регистрация: 19.02.2015
Сообщений: 217

рони,
приветствую вас!
Сообщение от рони
строка 102 и 103 укажите ссылки правильно
в смысле правильно? вы имеете ввиду ссылки на css и js?
102
<link href="https://raw.githubusercontent.com/noeldelgado/gemini-scrollbar/master/gemini-scrollbar.css" rel="stylesheet"/>
103
<script src="https://raw.githubusercontent.com/noeldelgado/gemini-scrollbar/master/index.js"></script>

А что в них не так? Они же не битые. Ничего не понимаю)
Ответить с цитированием
  #4 (permalink)  
Старый 01.04.2018, 13:59
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от LADYX
А что в них не так?
нужны другие, эти не предназначены для работы на других сайтах.
Ответить с цитированием
  #5 (permalink)  
Старый 01.04.2018, 14:02
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

LADYX,
<link href="https://cdn.rawgit.com/noeldelgado/gemini-scrollbar/master/gemini-scrollbar.css" rel="stylesheet"/>
<script src="https://cdn.rawgit.com/noeldelgado/gemini-scrollbar/master/index.js"></script>
Ответить с цитированием
  #6 (permalink)  
Старый 01.04.2018, 17:04
Аватар для LADYX
Профессор
Отправить личное сообщение для LADYX Посмотреть профиль Найти все сообщения от LADYX
 
Регистрация: 19.02.2015
Сообщений: 217

рони,
ах вот оно что, понял, буду знать. Спасибо вам большое! Удачи!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Скроллбар (как изменить) Fesali Элементы интерфейса 4 08.05.2017 05:08
Скроллбар и его размещение на другом контейнере. LLIypuk jQuery 0 18.02.2017 00:01
bootstrap modal. не работает скроллбар. mocol Библиотеки/Тулкиты/Фреймворки 0 16.01.2017 01:07
Скроллбар в ие DarkEderror Общие вопросы Javascript 5 27.11.2009 13:08
autocomplete и scrollbar artu-rich jQuery 1 26.06.2009 13:03