Can someone direct me to a plugin that can hide vertical scrollbars but maintain the ability for the user to scroll with the use of their mousewheel and also respond to tablet/phone devices? I am not using iframes.
I’ve tried a variety of CSS methods, but the scrolling doesn’t work.
It’s not intuitive for a user to know they can scroll without scrollbars present. Why would you want to confuse and hurt your users like this?
AFAIK, though scrollbars might look to be part of a page, they are in fact part of the browser chrome.
Not much you can reliably do about them.
Why would you want to hide the scrollbar in the first place?
I have to echo what the others have said but if you still want to go ahead then try something like this.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.test{
width:183px;
overflow:hidden;
border: 5px solid red;
padding:5px;
}
.inner {
width: 205px;
height: 200px;
overflow-x: hidden;
overflow-y: scroll;
-ms-overflow-style: none;
}
.inner::-webkit-scrollbar {
display: none;
}
</style>
</head>
<body>
<div class="test">
<div class="inner">
<p>Nunc sit amet lorem nec justo condimentum tincidunt. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam consequat rutrum mattis. Suspendisse euismod a orci ac maximus. Cras congue molestie blandit. Aenean gravida eros ipsum. Donec facilisis, lectus ut auctor consectetur, justo velit convallis leo, dapibus imperdiet est massa sollicitudin ligula. Sed quis nisi malesuada, volutpat tellus ac, finibus lorem. Mauris pharetra eros sed fringilla gravida. Quisque venenatis cursus ipsum, non condimentum diam ultricies quis. Nullam egestas sem sed velit cursus, at porttitor nulla ultrices. Ut ornare sit amet dolor et elementum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed condimentum, diam sit amet consequat dapibus, ante ante mollis magna, non sodales erat velit vel diam. Vivamus placerat ante non felis dictum, ut mollis libero faucibus. </p>
</div>
</div>
</body>
</html>
Thank you for the reply, gents.
I’m seeing a lot of newer site designs that disable the scrollbars and use more stylish navigation like arrow/slider buttons, etc. So I was trying to implement the same type of style to see how things would work.
Got an example of one?
As an aside on the imac in Firefox and Chrome there are no scrollbars any more and scrollbars only appear when you scroll when you slide your finger over the mouse (there is no mousewheel) then you get small shadowy scrollbars at the side (which you can’t actually use but are an indication of the scroll).
Thank you for the insight!
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.