CSS или JS заставляют вертикальную полосу прокрутки появляться только при прокрутке - PullRequest
3 голосов
/ 20 января 2012

Кто-нибудь знает, как заставить вертикальную полосу прокрутки появляться только при прокрутке с помощью CSS или JS?

Спасибо

1 Ответ

7 голосов
/ 20 января 2012

Это можно сделать с помощью CSS или JavaScript / jQuery.

Вот несколько примеров:

// JavaScript Example
document.querySelector('.jsExample').addEventListener('mouseenter', function(e){
  e.target.style.overflow = 'auto';
}, false);

document.querySelector('.jsExample').addEventListener('mouseleave', function(e){
  e.target.style.overflow = 'hidden';
}, false);


// jQuery Example
$('.jQueryExample').hover(
  function() { // Run on hover/mouseenter
    $(this).css('overflow', 'auto');
  },
  function() { // Run on mouseleave
    $(this).css('overflow', 'hidden');
  }
);
/* CSS Example */
.cssExample { overflow: hidden; }
.cssExample:hover { overflow: auto; }


/* Unimportant CSS just to setup examples */
.cssExample, .jsExample, .jQueryExample {
  background: #EEE;
  box-sizing: border-box;
  height: 4em;
  width: 300px;
  padding: 0.5em 1em;
  margin-bottom: 1em;
  overflow: hidden;
}
.cssExample::after, .jsExample::after, .jQueryExample::after {
  display: block;
  content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.';
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="cssExample">CSS Example</div>
<div class="jsExample">JavaScript Example</div>
<div class="jQueryExample">jQuery Example</div>

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...