Is possible to hide scrollbar on mobile for webpage? - html

I'm trying hide scrollbar on mobile. Everything looks well on desktop (no srollbar), but when I check on some android device (ipad) - I can still see grey, thin thumb. Is possible to hide predefined scrollbar from browser.
My code (work well on desktop).
body::-webkit-scrollbar {
background-color: #fff;
}
body::-webkit-scrollbar-thumb {
background-color: #fff;
}

Use -webkit-appearance:none to hide the scrollbar.
::-webkit-scrollbar {
-webkit-appearance: none;
}

Try this
::-webkit-scrollbar {
width: 0px;
background: transparent; /* make scrollbar transparent */
}

This was useful for me.
::-webkit-scrollbar { display: none; }

try this hide's it on screens less than 768px
body{
height: 1000vh
}
#media screen and (max-width: 768px){
::-webkit-scrollbar {
-webkit-appearance: none;
}
}
<p>Yao</p>

None of the previous answers worked for me. I had to add:
main {
overflow: hidden;
}
Then on mobile view through the browser there was no scroll bar to the right, but the scroll functionality still works.

Related

Scrollbar Not Showing in Chrome With Overflow-y: scroll

I'm using Chrome version 84.0.4147.89, and have a div that uses
overflow-y:scroll;
The scrolling functionality works, however no scroll bar shows. It does show in IE. I'm required to get it show as users with no mouse or touchscreen find it very difficult to scroll without the bar visible.
I have tried
overflow-y:scroll!important;
but that did not work either.
I have also tried disabling 'Use hardware acceleration when available' as I saw it recommended in another thread, but that also did not work.
How do I make the scroll bar appear for Chrome?
Thanks.
I think you have to declare a height. Here's an example of what I'm using.
div {
width: 30vw;
height: 49.75vw;
min-height: 1em;
overflow-y: visible;
overflow-x: hidden;
direction: ltr;
/*position of scroll bar can use rtl if wanted, but use div * {direction: ltr;} if you do.} */
scrollbar-width: thin;/*fancy width*/
scrollbar-color: #f3f0dd #154734;/*fancy colors for Firefox*/
}
div::-webkit-scrollbar {
width: 11px;
}
div::-webkit-scrollbar-track {
background: #154734;
}
div::-webkit-scrollbar-thumb {
background-color: #f3f0dd;
border-radius: 6px;
border: 3px solid #154734;
}

styles got messes up in printing

I am using an application to print the pages in potrait and landscape mode together.some pages are printing in potrait and some are in landscape.Printing the pages either in potrait or landscape looks good.But printing the pages in potrait and landscape together makes the pages with potrait to be congested.
This is the media query am using,
#media print {
html {
max-width: none;
width:100%;
float:left;
}
#nav-wrapper {
display: none;
}
div.pageBreak {
page-break-after: always !important;
}
#page{
size: auto;
margin: 0;
}
.landscape1 {
transform-origin: top left;
transform: translateY(1850px) rotate(-90deg);
overflow-x: hidden;
width: 1850px !important;
}
}
Media Queries offer matching against the device's orientation:
#media print and (orientation: landscape) {
/* landscape styles */
}
#media print and (orientation: portrait) {
/* portrait styles */
}
Work it in this way.
OR
Maybe you can try this custom css which someone tried online.
Here is a right CSS which work in the most browsers (Chrome, Firefox, IE9+).
First set body margin to 0, because otherwise page margins will be larger than those you set in the print dialog. Also set background color to visualize pages.
body {
margin: 0;
background: #CCCCCC;
}
margin, border and background are required to visualize pages.
padding must be set to the required print margin. In the print dialog you must set the same margins (10mm in this example).
div.portrait, div.landscape {
margin: 10px auto;
padding: 10mm;
border: solid 1px black;
overflow: hidden;
page-break-after: always;
background: white;
}
The size of A4 page is 210mm x 297mm. You need to subtract print margins from the size. And set the size of page's content:
div.portrait {
width: 190mm;
height: 276mm;
}
div.landscape {
width: 276mm;
height: 190mm;
}
I use 276mm instead of 277mm, because different browsers scale pages a little bit differently. So some of them will print 277mm-height content on two pages. The second page will be empty. It's more safe to use 276mm.
We don't need any margin, border, padding, background on the printed page, so remove them:
#media print {
body {
background: none;
-ms-zoom: 1.665;
}
div.portrait, div.landscape {
margin: 0;
padding: 0;
border: none;
background: none;
}
div.landscape {
transform: rotate(270deg) translate(-276mm, 0);
transform-origin: 0 0;
}
}
Note that the origin of transformation is 0 0! Also the content of landscape pages must be moved 276mm down!
Also if you have a mix of portrait and lanscape pages IE will zoom out the pages. We fix it by setting -ms-zoom to 1.665. If you'll set it to 1.6666 or something like this the right border of the page content may be cropped sometimes.
If you need IE8- or other old browsers support you can use -webkit-transform, -moz-transform, filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3). But for modern enough browsers it's not required.
You are good to go!!

Targeting certain screensize and useragent to view/hide certain content content

I'm developing a login form and I'm having difficulties in cross browser rendering.
When I use Chrome everything is displayed as it should be and the footer on the login form is where it should be. However when I open the login form with Firefox, the footer is not where it should be e.g at the bottom of the login form.
I want to add a <hr> which will only be displayed when the form is opened in Firefox browser and the width of the display is higher than 768px. It shouldn't be displayed in other browsers like Chrome, Safari, etc.
I'm using jade/pug and bootstrap for the front end and css to apply certain rules to the form.
My code is below.
Jade/Pug:
hr.div_buttons_ff
.col-md-12.col-lg-12.col-xl-12.col-sm-12
footer.footer_desk
hr.div_footer
p.no_acc_desk Don't Have an account ?
a.join_now_desk(href="#") Join now.
CSS:
#media screen and (min-width:768px) and (-moz-document)
{
.div_buttons_ff
{
padding: 1px 0px 1px 0px;
border: none;
outline: none;
clear: both;
}
}
I also tried with nested media query like the following:
#-moz-document url-prefix()
{
#media screen and (min-width:768px)
{
.div_buttons_ff
{
padding: 1px 0px 1px 0px;
border: none;
outline: none;
clear: both;
}
}
}
Also I tried nesting the -moz-document url-prefix() into media but again with no success.

WordPress Divi site mobile menu not scrolling

I have a wordpress site running an ET Divi child theme and on mobile the main menu does not scroll on touch, instead the background (website) scrolls. I've been trying several media queries and such to fix but cannot figure it out, anyone have thoughts or run into this before? Here is my child theme stylesheet add-on code:
the website is wptemp.thereverendmichael.com (make sure to adjust width for mobile viewing only)
#media (max-width: 980px) {
#main-header {
position: fixed !important;
}
}
#media (max-width: 980px) {
.et_fixed_nav #top-header {
position:fixed !important;
}
#mobile-menu {
overflow-y:scroll!important;
-overflow-scrolling:touch!important;
-webkit-overflow-scrolling:touch!important;
}
}
.et_mobile_menu {
margin-left: -30px;
padding: 5%;
width: calc( 100% + 60px);
}
.mobile_nav.opened .mobile_menu_bar:before {
content: "\4d";
}
Sorry, I figured it out with a bit more playing. Here was the solution
EDIT: Future Divi versions have changed .et-mobile-menu to .et_mobile_menu just thought I'd give a heads up.
.et_mobile_menu {
overflow-y:scroll!important;
max-height:80vh!important;
-overflow-scrolling:touch!important;
-webkit-overflow-scrolling:touch!important;
}

How to make content show/hide depending on device

I'm looking for a way to show/hide content for an email newsletter based on the device the customer is opening the email on.
I've currently got this snippet of code in the head section:
#media only screen and (max-width: 480px) {
#mobile { display: block; } /* show it on small screens */
#normal { display: none; } /* hide it elsewhere */
}
#media only screen and (min-width: 481px) {
#mobile { display: none; } /* hide it elsewhere */
#normal { display: block; } /* show it on large screens */
}
Along with:
<div id="mobile">content</div> or <div id="normal">content1<div>
This works fine if I was using it for web, I can scale my browser window and content appears/disappears based on the width of the window, but as soon as I send a test through our email system it works fine on mobile but breaks down on desktop (Gmail).
And because this is an email I can't utilise javascript so it all needs to be html/css.
Anything I'm doing wrong or missing?
I feel your pain. Showing and hiding content in html email newsletters was eluding me for ages!
/* Hide on Desktop */
.hide-desktop {
/* non-gmail */
display: none;
/* gmail */
font-size: 0;
max-height: 0;
line-height: 0;
/* outlook */
mso-hide: all;
/* optional, required only if you're using padding */
padding: 0;
}
#media (max-width: 480px) {
.hide-desktop {
display: block !important;
font-size: 12px !important;
max-height: none !important;
line-height: 1.5 !important;
}
}
/* Hide on Mobile */
#media (max-width: 480px) {
.hide-mobile {
display: none;
max-height: 0;
}
}
NOTE: Don't forget to inline the .hide-desktop rule, that is outside of the media query.
So using media queries and a number of hacks we can do a bullish hide all for desktop and then undo it media queries. Inversely, because mobile clients have decent support for media queries, we can hide the mobile content with media queries alone. The outlier, gmail, just gets the desktop view – which is unfortunate but still useable.