Today I will introduce to you How to Hide scroll bar, but while still being able to scroll, there are many cases now that we can use scroll but do not want to display scroll, if the display will lose the aesthetics of the website, so I will show you a way of Hide scroll bar in css, as you can do below.
Here is the css example of the implementation of hidden scroll in CSS
-webkit- (Chrome, Safari, newer versions of Opera):
CSS
Result image:
Here is the css example of the implementation of hidden scroll in CSS
-webkit- (Chrome, Safari, newer versions of Opera):
.element::-webkit-scrollbar { width: 0 !important }-moz- (Firefox):
.element { overflow: -moz-scrollbars-none; }-ms- (Internet Explorer +10):
.element { -ms-overflow-style: none; }Example below, you can coppy
CSS
.content, .outer-border {HTML
width: 50%;
height: 200px;
text-align:justify;
background-color:yellow;
margin:auto;
color:black;
padding-left:10px;
padding-right:10px;
}
.outer-border {
border: 2px solid black;
position: relative;
overflow: hidden;
}
.inner-border {
position: absolute;
left: 0;
overflow-x: hidden;
overflow-y: scroll;
}
.inner-border::-webkit-scrollbar {
display: none;
}
<div class="outer-border">All code
<div class="inner-border">
<div class="content">
The Open Data Protocol (OData) is a data access protocol built on core protocols like HTTP and commonly accepted methodologies like REST for the web. There are various kinds of libraries and tools can be used to consume OData services. But for beginners and those who want to write their own libraries, the pure HTTP requests and responses are also very important. This documentation will not cover every feature details for OData V4 services but will try to cover various typical scenarios. If you want to have a more detailed understanding, please refer to OData Documentation.
Please note
This is the advanced section. For topics like requesting data, query options, basic data modification, operations and etc, please refer to Basic Section.
All these are based on OData V4 sample service TripPin, please just replace the serviceRoot below with the URL https://services.odata.org/V4/TripPinServiceRW. TripPin now supports ETag, so for data modification topics, you should first using GET on TripPin (eg. GET serviceRoot/People) to get the section information in the payload then use the URL with section for data modification examples. (something looks like https://services.odata.org/V4/(S(flat4rgegiueineatspfdku1))/TripPinServiceRW)
You may use Fiddler to run the request (especially the complex ones of data modification) and get the JSON response.
In TripPin service, ETag is currently enabled on entity Person. We omit the ETag related headers in request headers for short, please go to the ETag Section for detailed information.
We will keep improving this by adding contents and fixing bugs. You can provide your feedbacks and ask questions using OData Mailling List.
</div>
</div>
</div>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hide scroll bar, but while still being able to scroll</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
.content, .outer-border {
width: 50%;
height: 200px;
text-align:justify;
background-color:yellow;
margin:auto;
color:black;
padding-left:10px;
padding-right:10px;
}
.outer-border {
border: 2px solid black;
position: relative;
overflow: hidden;
}
.inner-border {
position: absolute;
left: 0;
overflow-x: hidden;
overflow-y: scroll;
}
.inner-border::-webkit-scrollbar {
display: none;
}
</style>
</head>
<body class="container">
<div class="outer-border">
<div class="inner-border">
<div class="content">
coppy this paste
</div>
</div>
</div>
</body>
</html>
Result image:
thank youu :)
ReplyDeletethank verry
DeleteDevelopers are finding an appropriate answer about hide scroll bar when not needed related to the CSS coding language. By visiting this online portal developers get answers concerning CSS codes question like hide scroll bar when not needed.
ReplyDelete