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
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 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
I have created the following list item which works fine in chrome and every other browser that I have tried. It, however, does not work in IE.
I have created this application using the vue framework and have had multiple issues with Internet Explorer that have been able to be solved but I have been unable to find anything where other people have had a similar issue to this.
For some reason, once an item within the list has been selected the list then works as normal, but on the initial load of the page, the list is as shown in the images above. Also, the list is unable to scroll in IE until an item within the list has been selected.
Here is the list being CSS.
ul{
background-color: white;
padding-top:10px !important;
padding-bottom: 10px !important;
height: 100%;
max-height: 450px;
overflow: auto;
}
And the code used for the scroll bar that works fine in other browsers.
.col-4, .col-8{
padding:0;
overflow: hidden;
overflow-y: -moz-hidden-unscrollable;
}
html{
-ms-overflow-style: -ms-autohiding-scrollbar;
}
#-moz-document url-prefix() {
.list-group{
margin-right: -16px;
}
}
::-webkit-scrollbar {
display: none;
}
Any help will be much appreciated.
Only IE still honors overflow rules on the html element. try changing
html{
-ms-overflow-style: -ms-autohiding-scrollbar;
}
to
body{
-ms-overflow-style: -ms-autohiding-scrollbar;
}
To determine which Emulation mode IE11 is using in your development environment use the Emulation tab of the f12 dev tool.
If you are upgrading an old application to the newer framework, remove any presentation attributes (align, scroll, background etc) from the html tag.
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 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;
}