0

Нашел страницу https://denis-creative.com/jquery-tabs/. Возник вопрос: "Возможно ли использование скроллбара для табов (левого столбца), чтобы скроллбар был после столбца - Первая вкладка, Вторая вкладка, Третья вкладка, Четвертая вкладка (в вертикальном выравнивании табов - см. 2-й пример в скриншоте на https://denis-creative.com/jquery-tabs/)?" Если возможно, то приведите реализацию, а то я плохо представляю (необходимо, чтобы фон вкладок был белым, а вертикальная линия полосы прокрутки скроллбара была серой, шириной 5px).

1 ответ 1

0

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

То есть я указываю столбцу явную высоту, которая будет меньше высоты содержимого столбца, к примеру, я указал 200px, но добавил много вкладок, чтобы они занимали в несколько раз больше.

После чего я столбцу указал overflow-y: scroll, что обеспечивает появление скроллбара при превышении размеров содержимого по вертикали.

Сделал Вам пример в песочнице, также прилагаю код здесь

UPD: Указать нужный цвет и размер скроллбара вам помогут свойства ::-webkit-scrollbar, ::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb, которые работают не во всех браузерах, см. на этом сайте

Гайд по использованию свойств скроллбара на W3 доступен здесь

Базовый пример использования:


.tabs-selection::-webkit-scrollbar {
  width: 20px;
}

(function($) {
  $(function() {
    $("ul.tabs__caption").on("click", "li:not(.active)", function() {
      $(this)
        .addClass("active")
        .siblings()
        .removeClass("active")
        .closest("div.tabs")
        .find("div.tabs__content")
        .removeClass("active")
        .eq($(this).index())
        .addClass("active");
    });
  });
})(jQuery);
* {
  margin: 0;
  padding: 0;
}
body {
  margin: 30px;
  font: 13px/1.4 Arial, sans-serif;
}
a {
  color: #0094D6;
}
a:hover {
  text-decoration: none;
}
p {
  padding: 7px 0;
}
h1 {
  font-size: 21px;
  font-weight: normal;
  margin: 0 0 30px;
}
h2 {
  font-size: 16px;
  font-weight: normal;
  margin: 0 0 25px;
}
body {
  background: #F6F6F6;
}
.text {
  max-width: 700px;
  margin: 0 0 30px;
  background: #FFF;
  border: 2px solid #7DCA86;
  border-radius: 5px;
  padding: 7px 15px;
  box-sizing: border-box;
}

.tabs {
  max-width: 700px;
  margin: 0 0 30px;
}
.tabs__caption {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  list-style: none;
  position: relative;
  margin: -1px 0 0 -1px;
}
.tabs__caption li:last-child:before {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  right: -2px;
  z-index: -1;
  height: 5px;
  background: #7DCA86;
}
.tabs__caption:after {
  content: '';
  display: table;
  clear: both;
}
.tabs__caption li {
  padding: 9px 15px;
  margin: 1px 0 0 1px;
  background: #61AF6A;
  color: #FFF;
  position: relative;
  border: solid #61AF6A;
  border-width: 2px 2px 0;
  border-radius: 5px 5px 0 0;
  text-align: center;
}
.tabs__caption li:not(.active) {
  cursor: pointer;
}
.tabs__caption li:not(.active):hover {
  background: #7DCA86;
  border-color: #7DCA86;
}
.tabs__caption .active {
  background: #FFF;
  color: #000;
  border-color: #7DCA86;
}
.tabs__caption .active:after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  right: 0;
  height: 5px;
  background: #FFF;
}
.tabs__content {
  display: none;
  background: #FFF;
  border: 2px solid #7DCA86;
  border-radius: 0 5px 5px 5px;
  padding: 7px 15px;
}
.tabs__content.active {
  display: block;
}

.vertical .tabs__caption {
  float: left;
  display: block;
  height: 200px;
  overflow-y: scroll;
}
.vertical .tabs__caption li {
  float: none;
  border-width: 2px 0 2px 2px;
  border-radius: 5px 0 0 5px;
}
.vertical .tabs__caption li:last-child:before {
  display: none;
}
.vertical .tabs__caption .active:after {
  left: auto;
  top: 0;
  right: -2px;
  bottom: 0;
  width: 2px;
  height: auto;
}
.vertical .tabs__content {
  overflow: hidden;
}

@media screen and (max-width: 650px) {
  .tabs__caption li {
    -webkit-flex: 1 0 auto;
    -ms-flex: 1 0 auto;
    flex: 1 0 auto;
  }
  .vertical .tabs__caption {
    float: none;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
  .vertical .tabs__caption li {
    border-width: 2px 2px 0;
    border-radius: 5px 5px 0 0;
  }
  .vertical .tabs__caption li:last-child:before {
    display: block;
  }
  .vertical .tabs__caption .active:after {
    top: auto;
    bottom: -5px;
    left: 0;
    right: 0;
    width: auto;
    height: 5px;
    background: #FFF;
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tabs">

  <ul class="tabs__caption">
    <li class="active">Первая вкладка</li>
    <li>Вторая вкладка</li>
    <li>Третья вкладка</li>
    <li>Четвертая вкладка</li>
  </ul>

  <div class="tabs__content  active">
    <p>Локаята принимает во внимание онтологический закон исключённого третьего, открывая новые горизонты. Идеи гедонизма занимают центральное место в утилитаризме Милля и Бентама, однако гегельянство поразительно. Отношение к современности амбивалентно
      творит интеллект, изменяя привычную реальность.</p>
    <p>Апостериори, созерцание понимает под собой позитивизм, однако Зигварт считал критерием истинности необходимость и общезначимость, для которых нет никакой опоры в объективном мире. Закон исключённого третьего, следовательно, абстрактен. Катарсис рефлектирует
      трагический знак, открывая новые горизонты.</p>
  </div>

  <div class="tabs__content">
    <p>Закон внешнего мира, как принято считать, реально рассматривается знак, отрицая очевидное. Гегельянство творит катарсис, хотя в официозе принято обратное. Апперцепция подчеркивает смысл жизни, ломая рамки привычных представлений. Представляется логичным,
      что адживика откровенна.</p>
    <p>Априори, закон внешнего мира принимает во внимание естественный гедонизм, ломая рамки привычных представлений. Концепция реально творит гедонизм, учитывая опасность, которую представляли собой писания Дюринга для не окрепшего еще немецкого рабочего
      движения.</p>
    <p>Созерцание осмысляет трансцендентальный бабувизм, хотя в официозе принято обратное. Бабувизм абстрактен. Знак, следовательно, понимает под собой субъективный язык образов, ломая рамки привычных представлений. Деонтология непредвзято подчеркивает даосизм,
      при этом буквы А, В, I, О символизируют соответственно общеутвердительное, общеотрицательное, частноутвердительное и частноотрицательное суждения.</p>
  </div>

  <div class="tabs__content">
    <p>Структурализм, как следует из вышесказанного, заполняет из ряда вон выходящий дуализм, однако Зигварт считал критерием истинности необходимость и общезначимость, для которых нет никакой опоры в объективном мире. Суждение осмысляет интеллект, однако
      Зигварт считал критерием истинности необходимость и общезначимость, для которых нет никакой опоры в объективном мире.</p>
    <p>Сомнение, по определению, непредвзято заполняет знак, изменяя привычную реальность. Современная ситуация, следовательно, подрывает трагический смысл жизни, однако Зигварт считал критерием истинности необходимость и общезначимость, для которых нет
      никакой опоры в объективном мире. Гносеология категорически порождает и обеспечивает непредвиденный смысл жизни, отрицая очевидное.</p>
  </div>

  <div class="tabs__content">
    <p>Деонтология создает примитивный даосизм, открывая новые горизонты. Даосизм, как принято считать, амбивалентно представляет собой примитивный структурализм, не учитывая мнения авторитетов. Предмет деятельности транспонирует язык образов, учитывая опасность,
      которую представляли собой писания Дюринга для не окрепшего еще немецкого рабочего движения.</p>
    <p>Даосизм, по определению, создает здравый смысл, учитывая опасность, которую представляли собой писания Дюринга для не окрепшего еще немецкого рабочего движения. Сомнение, следовательно, преобразует гений, ломая рамки привычных представлений. Сомнение
      трогательно наивно.</p>
    <p>Жизнь откровенна. Предмет деятельности, как следует из вышесказанного, абстрактен. Искусство, как следует из вышесказанного, нетривиально. Гетерономная этика непредвзято понимает под собой смысл жизни, при этом буквы А, В, I, О символизируют соответственно
      общеутвердительное, общеотрицательное, частноутвердительное и частноотрицательное суждения.</p>
    <p>Здравый смысл, как принято считать, творит бабувизм, отрицая очевидное. Суждение, следовательно, амбивалентно. Искусство, по определению, подчеркивает данный позитивизм, открывая новые горизонты. Единственной космической субстанцией Гумбольдт считал
      материю, наделенную внутренней активностью, несмотря на это заблуждение рефлектирует субъективный дуализм, не учитывая мнения авторитетов.</p>
  </div>

</div>
<!-- .tabs -->


<div class="tabs  vertical">

  <ul class="tabs__caption">
    <li class="active">Первая вкладка</li>
    <li>Вторая вкладка</li>
    <li>Третья вкладка</li>
    <li>Червертая вкладка</li>
    <li>Вторая вкладка</li>
    <li>Третья вкладка</li>
    <li>Червертая вкладка</li>
    <li>Вторая вкладка</li>
    <li>Третья вкладка</li>
    <li>Червертая вкладка</li>
    <li>Вторая вкладка</li>
    <li>Третья вкладка</li>
    <li>Червертая вкладка</li><li>Вторая вкладка</li>
    <li>Третья вкладка</li>
    <li>Червертая вкладка</li>
  </ul>

  <div class="tabs__content  active">
    <p>Локаята принимает во внимание онтологический закон исключённого третьего, открывая новые горизонты. Идеи гедонизма занимают центральное место в утилитаризме Милля и Бентама, однако гегельянство поразительно. Отношение к современности амбивалентно
      творит интеллект, изменяя привычную реальность.</p>
    <p>Апостериори, созерцание понимает под собой позитивизм, однако Зигварт считал критерием истинности необходимость и общезначимость, для которых нет никакой опоры в объективном мире. Закон исключённого третьего, следовательно, абстрактен. Катарсис рефлектирует
      трагический знак, открывая новые горизонты.</p>
  </div>

  <div class="tabs__content">
    <p>Закон внешнего мира, как принято считать, реально рассматривается знак, отрицая очевидное. Гегельянство творит катарсис, хотя в официозе принято обратное. Апперцепция подчеркивает смысл жизни, ломая рамки привычных представлений. Представляется логичным,
      что адживика откровенна.</p>
    <p>Априори, закон внешнего мира принимает во внимание естественный гедонизм, ломая рамки привычных представлений. Концепция реально творит гедонизм, учитывая опасность, которую представляли собой писания Дюринга для не окрепшего еще немецкого рабочего
      движения.</p>
    <p>Созерцание осмысляет трансцендентальный бабувизм, хотя в официозе принято обратное. Бабувизм абстрактен. Знак, следовательно, понимает под собой субъективный язык образов, ломая рамки привычных представлений. Деонтология непредвзято подчеркивает даосизм,
      при этом буквы А, В, I, О символизируют соответственно общеутвердительное, общеотрицательное, частноутвердительное и частноотрицательное суждения.</p>
  </div>

  <div class="tabs__content">
    <p>Структурализм, как следует из вышесказанного, заполняет из ряда вон выходящий дуализм, однако Зигварт считал критерием истинности необходимость и общезначимость, для которых нет никакой опоры в объективном мире. Суждение осмысляет интеллект, однако
      Зигварт считал критерием истинности необходимость и общезначимость, для которых нет никакой опоры в объективном мире.</p>
    <p>Сомнение, по определению, непредвзято заполняет знак, изменяя привычную реальность. Современная ситуация, следовательно, подрывает трагический смысл жизни, однако Зигварт считал критерием истинности необходимость и общезначимость, для которых нет
      никакой опоры в объективном мире. Гносеология категорически порождает и обеспечивает непредвиденный смысл жизни, отрицая очевидное.</p>
  </div>

  <div class="tabs__content">
    <p>Деонтология создает примитивный даосизм, открывая новые горизонты. Даосизм, как принято считать, амбивалентно представляет собой примитивный структурализм, не учитывая мнения авторитетов. Предмет деятельности транспонирует язык образов, учитывая опасность,
      которую представляли собой писания Дюринга для не окрепшего еще немецкого рабочего движения.</p>
    <p>Даосизм, по определению, создает здравый смысл, учитывая опасность, которую представляли собой писания Дюринга для не окрепшего еще немецкого рабочего движения. Сомнение, следовательно, преобразует гений, ломая рамки привычных представлений. Сомнение
      трогательно наивно.</p>
    <p>Жизнь откровенна. Предмет деятельности, как следует из вышесказанного, абстрактен. Искусство, как следует из вышесказанного, нетривиально. Гетерономная этика непредвзято понимает под собой смысл жизни, при этом буквы А, В, I, О символизируют соответственно
      общеутвердительное, общеотрицательное, частноутвердительное и частноотрицательное суждения.</p>
    <p>Здравый смысл, как принято считать, творит бабувизм, отрицая очевидное. Суждение, следовательно, амбивалентно. Искусство, по определению, подчеркивает данный позитивизм, открывая новые горизонты. Единственной космической субстанцией Гумбольдт считал
      материю, наделенную внутренней активностью, несмотря на это заблуждение рефлектирует субъективный дуализм, не учитывая мнения авторитетов.</p>
  </div>

</div>
<!-- .tabs -->

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.