Как можно реализовать возможность скролла без видимого сролл-бара?
Пример кода на 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>