I am using html/css/js to make a website but a scroll is appering because of some effects I added. But I don't want a user to see the scrollbar or even scroll with middle mouse button. What can I do to solve this problem?
Guesswork solution:
body { overflow: hidden; }
https://developer.mozilla.org/de/docs/Web/CSS/overflow
you can use css for this problem if you don't want the scroll to appear
overflow: hidden;
for more you can refer this
overflow
you can use in CSS
overflow:hidden
https://developer.mozilla.org/de/docs/Web/CSS/overflow
or if you want to have scrolling but you can hide it
/* Hide scrollbar for Chrome, Safari and Opera */
.example::-webkit-scrollbar {
display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
.example {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_hide_scrollbar_keep_func
Related
Im doing a bit of frontend development via Vue.JS and Vuetify. My goal was it to archive a hidden scrollbar (through i know i cannot delete it ^^) and i know that the code snippet shown below should do the job, they are located in the index.html that is used as a template for vue-cli to build the website:
<style>
html::-webkit-scrollbar { display: none; }
html { -ms-overflow-style: none; }
</style>
On Chrome and MS Edge these works flawlessly but on for example Safari and Firefox it doesn't do a thing - even if its shown in the Developer tools it seems to be just ignored completely. If I put it into each App.vue (I got an Multi Page Project) it seems to work but why? And is there a solution to this Problem?
Greetings
To hide scroll bar on Chrome, Firefox and IE you can use this:
.hide-scrollbar
{
overflow: auto;
-ms-overflow-style: none; /* IE 11 */
scrollbar-width: none; /* Firefox 64 */
}
Perhaps this will help?
.your-class {
/*FireFox*/
scrollbar-width: none;
/*IE10+*/
-ms-overflow-style: -ms-autohiding-scrollbar;
}
.your-class::-webkit-scrollbar {
/*Chrome, Safari, Edge*/
display: none;
}
I am trying to hide the scrollbar of my iPhone but overflow: hidden doesn't seem to be working. I also tried touchmove(e) {e.preventDefault()} but if I drag from down to up, I still see the scrollbar appear.
If I do position: fixed, then my page jumps (for example: if I open a modal view with my addressbar and nav bar minimized, on doing position: fixed, the address bar and nav bar appears back causing a jump on the page.)
Any advice would be appreciated.
I have also tried adding the styling for the scrollbars like:
.hide-scrollbar::-webkit-scrollbar {
display: none;
width: 0px;
background: transparent;
}
.hide-scrollbar::-webkit-scrollbar-button {
display: none;
}
.hide-scrollbar {
-ms-overflow-style: none; // IE 10+
overflow: -moz-scrollbars-none; // Firefox
}
but still doesn't hide the scrollbar.
I have a site has a <div> on it that is vertically scrollable. That works well. I am also hiding the scrollbar, and that also works well. CSS is essentially
.scrollable {
overflow-y: scroll;
-ms-overflow-style: none;
}
I am currently having a problem, though, with it in Internet Explorer 11 and Windows 7 on a touch enabled display. When a user hits the top of bottom of the scroll, the window bounces (ie, there is overscroll). While this would just be an annoyance for most users, this is running fullscreen in a kiosk, so the overscoll allows the desktop to peek through (not just the browser background).
I have been unsuccessful at figuring out a solution to this. touch-action (prefixed and not), eg
html, body, .scrollable {
-ms-touch-action: none;
touch-action: none;
}
doesn't seem to do anything, nor do
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('MSPointerMove', function (e) { e.preventDefault(); }, false);
This jsBin shows the problem.
So, what is the proper way to prevent overscroll in IE11 / Windows 7.
Thinking outside the box (see what I did there) would giving the parent element - body, section or even another div a background colour mitigate the main issue of the desktop showing through?
Otherwise have a look at the
-ms-scroll-chaining: none;
property from http://msdn.microsoft.com/en-us/library/ie/hh772034(v=vs.85).aspx which looks like it might fix your problem - though I have no way to test it myself.
The overscroll bounce effect is not limited to Internet Explorer 11 and can be seen in even simple applications, such as Notepad.
To disable the effect, set the following registry key to "0":
HKEY_CURRENT_USER\Software\Microsoft\Wisp\Touch\Bouncing
Sorry should have tested before posting answer.
I tested the jsbin problem and solved it like this. Assign these styles to the scrollie class:
.scrollie {
max-height: 200px;
width: 300px;
overflow-y:scroll;
word-wrap:break-word;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
The problem can be solved with the word-wrap property in css3.I also addded a overflow-x:hidden just to be sure.
.scrollable {
overflow-y: scroll;
-ms-overflow-style: none;
word-wrap:break-word;
overflow-x:hidden;
}
Here you can read more about word-wrap here-
http://www.w3schools.com/cssref/css3_pr_word-wrap.asp
If you didnt understand any part of my question, or this didnt solve your problem, please comment and tell me so as i am open to answering more questions.
Try using:
.scrollable {
overflow: auto;
zoom: 1;
}
or
.scrollable {
overflow: hidden;
zoom: 1;
}
I believe I fixed it by adding the following to your CSS:
body {
overflow: hidden;
}
You can see the results at this updated jsBin
I am using shadowbox to open different links on a website. For some reason, Firefox does not show the horizontal scrollbar. It works fine in all other browsers.
I have tried this with no luck :(
link
I have also tried the following on the iframe page:
html {
overflow: -moz-scrollbars-horizontal;
overflow: scroll;
}
Anyone know whats going on?
shadowbox.css line 9 contains:
overflow-x: hidden;
Which hides the horizontal scrollbar.
You could overrule this by adding !important:
body {
overflow: scroll !important;
}
Add this in your default.css file and try:
html, body {
overflow: auto;
}
Am developing a mobile web application using html and javascript.I have a task to develop loading overlay in this application and I have made a transparent div as overlay ,while it po-up need to prevent the click on the elements which is under the transparent div.But only in windows mobile phones (IE browser) it's possible me to click the underlying elements.How I can prevent this? given below the css I have applied for it
.overlaypage {
top: 0px;
opacity: .5;
background: black;
position: absolute;
height: 100%;
width: 100%;
pointer-events: visible;
display: block;
z-index: 1001;
}
I found this question here first, but I found another SO post that had a CSS-only solution that worked for me here.
The gist of the CSS is as follows:
.overlay {
height: 0px;
overflow: visible;
pointer-events: none;
background:none !important;
}
In my case, I had text as well, and I didn't want users to be able to select it, so added the following (see user-select here and here):
.overlay {
-webkit-user-select: none; /* Chrome all / Safari all */
-moz-user-select: none; /* Firefox all */
-ms-user-select: none; /* IE 10+ */
user-select: none; /* Likely future */
}
Add onclick attribure to overlaypage block. Like:
<div class="overlaypage" onclick="return false;"></div>
Just use the z-index to action element.
for more visit here: Disable Clicks on Div Overlay, But Allow Children Clicks