We Keep Coding

Hide scrollbars in Quasar/Vue - overflow hidden not working

I am using Quasar/VueJS for development. How can I remove the outermost scrollbar (this is for the actual body of the page).
So annoyed that I have already tried putting overflow:hidden everywhere but it is still there.
Since I have a scrollbar for my sidebar, I just dont want another scrollbar to be beside it, as it can be confusing for the user. As you can see, I am working on adding another scrollbar just beside the actual body of the page.
How can I get rid of the outermost scrollbar?
Codepen:
https://codepen.io/kzaiwo/pen/bGVrweM?editable=true&editors=101%3Dhttps%3A%2F%2Fquasar.dev%2Flayout%2Fdrawer

Working with Quasar, checkout the docs, more specific this class: no-scrollbar. apply this on the element of concern.
Adding the following to your main styling will make the scroll bar go away without losing the scroll functionality:
::-webkit-scrollbar {
display: none;
}
Be aware that this will not work for firefox and IE. More info:
https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar

.scroll {
overflow: hidden;}
Add this class to your css

<q-layout container>
Remove container from q-layout.
<q-layout>
https://quasar.dev/layout/layout#qlayout-api

You can hide the scrollbar without loosing the scroll behavior with css...
/* Hide scrollbar */
::-webkit-scrollbar {
display: none;
}
This works on chrome for sure, probably on Safari aswell, not sure (probably not) if IE and Firefox.

Issue on Using Animate.css - Horizontal Scrollbar Added to Page on Animation

I am trying to add some animations to text using Animate.css and jQuery # This Demo
I am using jquery addClass() to apply .animated, .bounceInLeft, and .bounceInRight to the elements by using this code:
$(function () {
$('#solu-title-1').addClass('animated bounceInLeft');
$('#solu-title-2').addClass('animated bounceInRight');
$('#solu-description-1').addClass('animated bounceInLeft');
$('#solu-description-2').addClass('animated bounceInRight');
});
but as you can see the page also is getting annoying Horizontal Scrollbar during the animation process. Can you please let me know how I can stop this?
Thanks

body {
overflow-x: hidden;
}
http://jsfiddle.net/DTcHh/3127/

Actyally, better set like here:
html, body{ overflow-x: hidden; max-width: 100%}
Because for mobile versions it doesn't work corectly

I solved this adding a metatag
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1,user-scalable=no">

I had a similar issue - I finally found because I used some animations in React Spring(fade in from right), which caused scrolling down the page to feel like a slip n slide.
I added “user-scalable=no” to the html viewport metatag, as commented above, and it did the trick for me!

Scroll not working on Android Chrome only

For some reason scroll doesn't work on Android Devices in Chrome browser only.
You can see the site at Peshkuiarte.com/mobile
I have tried:
$(document).ready(function() {
$('body').css('touch-action', 'auto');
});
I can't seem to figure it out ... Any help would be greatly appreciated

By scroll do you mean dragging the page with your finger on mobile?
You've set -webkit-user-drag: none; as an inline style for body, which might be the cause.
It's a Webkit-specific property:
CSS property: -webkit-user-drag
Description
Specifies that an entire element should be draggable instead of its contents.
Syntax
-webkit-user-drag: auto | element | none;
Values
auto The default dragging behavior is used.
element The entire element is draggable instead of its contents.
none The element cannot be dragged at all.
It's supported by Chrome 1-17 and Safari 3-5.1: http://www.browsersupport.net/CSS/-webkit-user-drag

we had same problem on Chrome 40.0... and we fixed with css only solution. Maybe it is not clean but works for us:
#media screen and (max-width: 1024px) {
html, body {
z-index: 0 !important;
overflow: scroll !important;
}
}

In my case, I have found touch-action: none added on body element.
Removing it enabled scrolling in android chrome.
Summary
The touch-action CSS property specifies whether, and in
what ways, a given region can be manipulated by the user (for
instance, by panning or zooming).
Source: https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action
Hope it helps people dealing with legacy code :)

e.preventDefault
function handlerSwipe(e){
e.preventDefault();
if(handlerTouch){
if(e.changedTouches[0].clientX>=110)
toggle.checked=true;
else toggle.checked=false;
}
return false;
}
window.addEventListener("touchmove", handlerSwipe, false);
This was the code i used for creating a swipeable navigation drawer because of this scrolling was not working .Just removing the e.preventDefault(); from the above code solved my problem

I am not really sure about the question, you say "scroll" but the accepted answer is talking about "drag". So I am going to give you what I think you are asking (not being able to scroll within an area on a mobile).
The simplest solution is a CSS one rather than a JS one. If you have an area on your page that you need to scroll, for example a code block on a tech blog you can set position relative on the area and have overflow-x set to auto. On the body you will need to have it not move when you touch the screen.
pre {
white-space: pre-wrap;
overflow-y: auto;
position: relative;
}
html,body{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
You can see this solution working on my blog if you look at the code snippet sections and try and scroll on them via chrome mobile.(http://fullstack.life/mapping_arrays.html)

pointer-events
I came across another issue today and I'm going to leave this here for reference. If the element with the overflow-y: scroll; either sets its pointer-events: none; or inherits it, then it won't work either. On this layer, pointer events need to be re-enabled with:
pointer-events: auto;

Here is the fix for this issue that worked for me.
When you call the niceScroll function $("body").niceScroll(); in your javascript class, it appears to add an inline style of: overflow-y: visible on your body element (because it is inline, it overrides any previous overflow: hidden that you may have written in your css file.
Simply add overflow: hidden ! important in the css of your body element.
Also, make sure that your html element has style of
overflow: hidden;
touch-action: none;

Disable selection on swipe

I'm changing a script (found on www.dynamicdrive.com) for being used with Jquery 1.4, so I could use it within Drupal 7. My version of it is live at http://screamingsilence.be/js/touchGallery/
All is working well, but when I view it on my Android tablet/smartphone, the images gets selected and that doesn't look very pretty.
I tried this code, but this doesn't help:
$('img').attr('unselectable','on').bind('selectstart', function(){ return false; })

apply the following css style on the images parent / container:
-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;
hope that helps.

Print a website without printing the link locations?

I'm invoking the navigator print function using a simple window.print(); call. It prints perfect (I want to print the same I see on the screen, so I don't really use a special CSS to print) but it showing the link locations next to the text link, something like:
Homepage (http://localhost)
To be clearer: I don't want to have the link locations near the links in the printed version, I have control over the CSS but I can't find this behaviour defined anywhere, so I think is a navigator-related issue!
EDIT:
This happens under Firefox 3.6.8 and the last Chrome, on Ubuntu an Windows XP/Vista.

So to avoid additional print-out of link information in a printed web page, add the following rules to the #media print section:
a:link:after, a:visited:after {
content: "";
}
This will remove the ugly link information like Homepage (http://localhost) and reduce it to Homepage. You may of course add rules to avoid it only in the text section (or only in the navigation, but you shouldn't display navigation in the print-out format of your web page.

Seems you are printing a page with this styling from a CSS2 compliant browser
http://www.alistapart.com/articles/goingtoprint/
In a fully CSS2-conformant browser, we
can parenthetically insert the URLs of
the links after each one, thus making
them fairly useful to anyone who has a
copy of the printout and a web browser
handy. Here’s the rule, which
restricts this effect to the “content”
div and thus avoids sticking a URL in
the masthead:
#content a:link:after, #content a:visited:after {
content: " ("attr(href) ") ";
font-size: 90%;
}
Try it out in a Gecko-based browser,
like Mozilla or Netscape 6.x. After
every link in the printout, you should
see the URL of the link in
parentheses.

content: ""; does not work
I use this:
#media print {
.noprint {display:none !important;}
a:link:after, a:visited:after {
display: none;
content: "";
}
}
This works to disable!

Currently using the content property should work in all major browsers.
#media print - or - <style type="text/css" media="print">
a:link:after, a:visited:after {
content: normal; //TODO: add !important if it is overridden
}
More options here: CSS Content.
More usefull ways of using the content attribute here: CSS Tricks

My app server (rails) required me to use a parent selector. The body element is perfect for selecting what should be the entire page.
body a:link:after, body a:visited:after {
content: "";
}

I found the other solutions don't work (anymore) cross-browser.
The following works in FF 29, Chrome 35, IE 11:
a:link:after, a:visited:after {
content: normal !important;
}

For anyone using Bootstrap 3, the selector used is:
a[href]:after { }
And can be overriden with something like:
a[href]:after {
content: initial;
}

Use additional CSS for print.
See here:
http://www.webcredible.co.uk/user-friendly-resources/css/print-stylesheet.shtml

Adding this will help you to remove those unwanted links
<style type="text/css" media="print">
#page
{
size: auto; /* auto is the initial value */
margin: 0mm; /* this affects the margin in the printer settings */
}
Reading this will help

While many css options have been suggested, if you wish to get rid of the links and headings in the header/footer which is forced on each page, there is a setting just for you. As shown below.
That's it.

I found the mentioned CSS and removed it but it did not help, and I couldn't find it anywhere else in the project so I used jQuery to remove the links but still retain the text.
$('a[title="Show Profile"]').contents().unwrap();
More info here Remove hyperlink but keep text?

I faced the same problem, if you're using chrome, the trick is when displaying the print window, this one contains a left config panel which gives some configuration of display mode and other, there is a link below named : more params or more config (I had in french so I tried to translate it ), click on it after that it will show some additionnal options, among them, there is a check box "header and footer" uncheck it, and it will hide the "localhost...."
hopefully it will help

Every browser having setting of printing header and footer ,and background graphics
If you disable this setting of printing header and footer then it will not show on your print page