1

Как можно реализовать возможность скролла без видимого сролл-бара?

Пример кода на jsfiddle

var rotate = 0;
$('.news-switch').click(function() {
  if (rotate >= 360) rotate = 0;
  $('.news-switch>img').css('transform', 'rotate(' + (rotate += 180) + 'deg)');
  if (rotate == 180) $('.news-switch').css('width', '350px');
  else $('.news-switch').css('width', '110px');
  $('#news-block').toggle();
});
#all-news {
  margin-top: -21px;
  position: fixed;
}
.news-switch {
  width: 133px;
  background-color: #008cba;
  border: 1px solid #006687;
  padding: 5px 10px 5px 10px;
  left: 0;
  position: absolute;
  color: white;
  cursor: pointer;
  z-index: 100;
}
.bottom {
  bottom: 0px;
  width: 350px;
}
.bottom>img {
  transform: rotate(180deg) !important;
}
.news-switch>img {
  margin-left: 10px;
  margin-top: 5px;
  float: right;
}
#news-block {
  display: none;
  background-color: #008cba;
  border: 1px solid #006687;
  padding: 40px 5px 45px 5px;
  left: 0;
  position: absolute;
  color: white;
  width: 350px;
  height: 500px;
}
.news {
  background-color: #5bc0de;
  padding: 1px 7px 30px 7px;
  margin-bottom: 5px;
}
.news h4 {
  text-align: center;
}
.news p {
  text-indent: 15px;
}
.news a {
  color: rgba(21, 20, 20, 0.37);
  text-decoration: none;
  float: right;
}
.news a:hover {
  color: rgb(0, 0, 0);
  padding: 5px;
  font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div id='all-news'>
  <div class='news-switch'>Новости
    <img src='/upload/arrow.png' />
  </div>
  <div id='news-block'>

    <div class='news'>
      <h4>Заголовок</h4>
      <p>Текст
        <br>како-нибудь
        <br>чтобы был</p>
      <a href="#">Подробнее</a>
    </div>
    <div class='news'>
      <h4>Заголовок</h4>
      <p>Текст
        <br>како-нибудь
        <br>чтобы был
        <br>чтобы был
        <br>чтобы был
        <br>чтобы был
        <br>чтобы был
        <br>чтобы был
        <br>чтобы быавыаываыаываываываываываываваыв ывацуак цуацку кауцеацецекцеукеукеукеукеукеукел
        <br>чтобы был
        <br>чтобы был</p>
      <a href="#">Подробнее</a>
    </div>
    <div class='news'>
      <h4>Заголовок</h4>
      <p>Текст
        <br>како-нибудь
        <br>чтобы был
        <br>чтобы был
        <br>чтобы был
        <br>чтобы был
        <br>чтобы был
        <br>чтобы был
        <br>чтобы быавыаываыаываываываываываываваыв ывацуак цуацку кауцеацецекцеукеукеукеукеукеукел
        <br>чтобы был
        <br>чтобы был</p>
      <a href="#">Подробнее</a>
    </div>
    <div class='news'>
      <h4>Заголовок</h4>
      <p>Текст
        <br>како-нибудь
        <br>чтобы был
        <br>чтобы был
        <br>чтобы был
        <br>чтобы был
        <br>чтобы был
        <br>чтобы был
        <br>чтобы быавыаываыаываываываываываываваыв ывацуак цуацку кауцеацецекцеукеукеукеукеукеукел
        <br>чтобы был
        <br>чтобы был</p>
      <a href="#">Подробнее</a>
    </div>




    <div class='news-switch bottom'>Новости
      <img src='/upload/arrow.png' />
    </div>
  </div>
</div>

10
  • Отлавливать mousewheel событие и изменять положение элемента вручную. Для Jquery есть отдельный плагин mousewheel .
    – Alex Krass
    25 сен 2015 в 12:30
  • 2
    Вы имеете ввиду примерно так: jsfiddle ? 25 сен 2015 в 12:34
  • а не вариант передвигаться по якорям ? к примеру как делают лендинг page , могу скинуть пример этого
    – user33274
    25 сен 2015 в 12:43
  • @AlexanderIgorevich, только если Ваш пример ограничен Google Chrome, в остальных случаях это не поможет. Браузер FF не отрабатывает, IE даже код автора не отрабатывает.
    – Alex Krass
    25 сен 2015 в 12:56
  • @AlexanderIgorevich,да.почти-только нижний блок новость убегает тоже))
    – DarkVss
    25 сен 2015 в 13:05

1 ответ 1

1

Для того что бы скрыть скролл бары на странице в вебкит браузерах

::-webkit-scrollbar { 
    display: none; 
}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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