How can I implement the ability to scroll without a visible roll bar?

Jsfiddle code sample

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> 

  • Catch the mousewheel event and change the position of the item manually. For jQuery there is a separate mousewheel plugin. - Alex Krass
  • 2
    Do you mean something like this: jsfiddle ? - Alexander Igorevich
  • and not an option to move along anchors? for example how to make a landing page, I can throw an example of this - user33274
  • @AlexanderIgorevich, only if your example is limited to Google Chrome, otherwise it will not help. FF browser does not work, IE even the author’s code does not work. - Alex Krass
  • @ AlexanderIgorevich, yes. Almost the bottom block news runs away too)) - DarkVss

1 answer 1

In order to hide scroll bars on a page in webkit browsers

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