I want to hide a scroll bar in page but I can scroll like it has a scroll bar.
so I cant use overflow:hidden because I want that I can scroll like normal
but cannot see a scroll bar.
so I use this css code (class not-scroll-body is a class of body tag)
.not-scroll-body::-webkit-scrollbar {
display: none;
}
It works in Chrome , but when I use -moz- instead of -webkit- like this
.not-scroll-body::-moz-scrollbar {
display: none;
}
It doesn't work in Firefox.
What can I do to to make it work?
Thank you for every answer and sorry for my poor english language :)
In firefox 64, if you want to hide scroll when you have overflow:auto you can now do scrollbar-width: none;! Woop woop! Here are the relevant docs (browser support is show at bottom of page).
Below is a simple css only solution that will hide your vertical and horizontal scrollbar in firefox (tested in v64 & firefox dev edition v65.0b8). Hint: try vertical and horizontal scrolling on the blue div.
.not-scroll-body {
overflow: auto;
height: 200px;
width: 90%;
background: linear-gradient(to bottom, cyan, blue);
white-space: no-wrap;
/* the line that rules them all */
scrollbar-width: none;
/* */
}
span {
width: 200%;
height: 400%;
background: linear-gradient(to left, green, yellow);
display: inline-block;
margin: 5rem;
}
<div class="not-scroll-body"><span></span></div>
According to this answer and everything I've been able to find on the web, there's no Firefox equivalent of the -webkit-scrollbar selector. Apparently there used to be a property, -moz-scrollbars-none, that you could use for this, but it's since been removed and people recommend using overflow:hidden or a hackish margin-right: -14px solution.
Sorry I can't be more helpful -- it seems like there's no Firefox way to do this elegantly.
I was able to hide the scrollbar but still be able to scroll with mousewheel with this solution:
html {overflow: -moz-scrollbars-none;}
Download the plugin https://github.com/brandonaaron/jquery-mousewheel and include this function:
jQuery('html,body').bind('mousewheel', function(event) {
event.preventDefault();
var scrollTop = this.scrollTop;
this.scrollTop = (scrollTop + ((event.deltaY * event.deltaFactor) * -1));
//console.log(event.deltaY, event.deltaFactor, event.originalEvent.deltaMode, event.originalEvent.wheelDelta);
});
cf: https://stackoverflow.com/a/41021131/4881677
This is how I do it, only CSS and works well with frameworks like bootstrap. It only needs 2 extra div:
You can select the text to make it scroll or scroll it with fingers if you have a touchscreen.
.overflow-x-scroll-no-scrollbar {overflow:hidden;}
.overflow-x-scroll-no-scrollbar div {
overflow-x:hidden;
margin-bottom:-17px;
overflow-y:hidden;
width:100%;
}
.overflow-x-scroll-no-scrollbar div * {
overflow-x:auto;
width:100%;
padding-bottom:17px;
white-space: nowrap;
cursor:pointer
}
/* the following classes are only here to make the example looks nicer */
.row {width:100%}
.col-xs-4 {width:33%;float:left}
.col-xs-3 {width:25%;float:left}
.bg-gray{background-color:#DDDDDD}
.bg-orange{background-color:#FF9966}
.bg-blue{background-color:#6699FF}
.bg-orange-light{background-color:#FFAA88}
.bg-blue-light{background-color:#88AAFF}
<html><body>
<div class="row">
<div class="col-xs-4 bg-orange">Column 1</div>
<div class="col-xs-3 bg-gray">Column 2</div>
<div class="col-xs-4 bg-blue">Column 3</div>
</div>
<div class="row">
<div class="col-xs-4 bg-orange-light">Content 1</div>
<div class="col-xs-3 overflow-x-scroll-no-scrollbar">
<div>
<div>This content too long for the container, so it needs to be hidden but scrollable without scrollbars</div>
</div>
</div>
<div class="col-xs-4 bg-blue-light">Content 3</div>
</div>
</body></html>
Short version for lazy people:
.overflow-x-scroll-no-scrollbar {overflow:hidden;}
.overflow-x-scroll-no-scrollbar div {
overflow-x:hidden;
margin-bottom:-17px;
overflow-y:hidden;
width:100%;
}
.overflow-x-scroll-no-scrollbar div * {
overflow-x:auto;
width:100%;
padding-bottom:17px;
white-space: nowrap;
cursor:pointer
}
/* the following classes are only here to make the example looks nicer */
.parent-style {width:100px;background-color:#FF9966}
<div class="parent-style overflow-x-scroll-no-scrollbar">
<div>
<div>This content too long for the container, so it needs to be hidden but scrollable without scrollbars</div>
</div>
</div>
I assuming you want to hide the scrollbar locally. In that i mean, not on a web server for the world to see, but on your local copy of firefox, for your 'viewing pleasure' only.
this is what I've found to work for me on opensuse/kde:
in userChrome.css;
#content browser {
margin-right -12px !important;
overflow-x:hidden;
overflow-y:scroll;
}
use -14px to completely hide vertical-scroll (more if your system theme has wider scroll setting). I use less (10px) to see just a little of it so I can middle-click to jump to a place on the page.
thing that i did, but don't always work, any longer:
in userContent.css
#content browser {
overflow:-moz-scrollbars-none;
}
-or-
html {
overflow: -moz-scrollbars-none;}
}
above used to work, but I now I've lost the mouse-wheel scroll. Only keyboard arrow keys work now.
Hope I understood what you want and this helps.
Landis.
You might be able to use overflow:-moz-hidden-unscrollable -- this worked perfectly for my needs in part because I was already using dragscroll.js.
As I was looking for it myself and this thread is not providing the updated answer, I would provide it for other newcomers as myself.
#element{
scrollbar-width: none;
}
Related
Im creating a grouped list with sticky header. Really would like to use virtualization with it. But the virtualization doesnt work when i set fixed height and overflow on the top level table-content-container. Virtualization only works when fixed height and overflow is set to group-body-container.
Here's the html i got what does not work:
<div class="table-container">
<div class="table-header grid-row-template">
<div class="header-item">Id</div>
<div class="header-item">Name</div>
</div>
<div class="table-content-container" style="height:50vh; overflow-y:scroll">
#foreach (DataGroup group in dataGroups)
{
<div class="group-header">
<MudToggleIconButton
#bind-Toggled="#group.IsExpanded"
Icon="#Icons.Filled.ExpandMore"
Color="Color.Secondary"
ToggledIcon="#Icons.Filled.ExpandLess"
Size="Size.Small"
ToggledSize="Size.Small"/>
<MudText Color="#Color.Primary">#group.GroupName</MudText>
</div>
#if (group.IsExpanded)
{
<div class="group-body-container">
<Virtualize Items="group.DataRow" Context="row" ItemSize="20">
<div class="grid-row-template data-row">
<div class="data-item">#row.Id</div>
<div class="data-item">#row.Name</div>
</div>
</Virtualize>
</div>
}
}
</div>
</div>
Here the virtualization works: https://try.mudblazor.com/snippet/GEcwagOjgXcmYqFL
Here its not working: https://try.mudblazor.com/snippet/GawcYUuNUXbCiTTY
The goal would be to have the virtualization working with the second example, when scrolled only the top header would be "sticky".
EDIT:
Here's recording of what i would like to achieve but with working virtualization (https://try.mudblazor.com/snippet/GawcYUuNUXbCiTTY):
Is this even possible with blazors virtualization component?
It is because the Virtualize component needs a limiting height - either explicit or implicit. As you have it now, each Virtualize can just grow to consume as much space as it needs.
You can make your container use flexbox and your group container have a min/max height of 100% to achieve this:
.table-content-container {
display: flex;
flex-direction: column;
gap:0;
}
.group-body-container {
min-height: 100%;
max-height: 100%;
overflow: auto;
}
Updated demo #2 where the expanded group matches the container height - but without more information about what you are trying to do this could go on forever....:
https://try.mudblazor.com/snippet/wOQwEKbUdhZHlbiE
To round things off - I do not recommend this design, but to show it is possible, you can also hide the scrollbars on the expanded/virtualised groups with CSS
.group-body-container {
min-height: 100%;
max-height: 100%;
overflow: auto;
}
.group-body-container {
scrollbar-width: none; /* Firefox */
}
.group-body-container::-webkit-scrollbar {
display: none; /* Safari and Chrome */
}
Here is a demo: https://try.mudblazor.com/snippet/cammugcNEmPoITgg - with a scrollbar only on the main container, so you can only scroll the virtualized groups contents with mousewheel/touch - which is why I don't like it.
Can't seem to make the iframe appear with a scroll-bar.
Go to https://billiving-qa.azurewebsites.net/accountant
email: qa#billiving.com
pass: 111111
Reload the list with F5, then click new invoice on the right side. The content is lengthy but doesn't show the scroll-bar.
My css uses the following:
.frm {
position: fixed; width: 100%; height:100vh; overflow-y:scroll !important; overflow-x:hidden !important;
}
html is as follows:
<iframe frameborder="5" class="frm" ng-src="{{trustSrc(url)}}" scrolling="yes"></iframe>
You have hidden scrollbars in ionic.app.css:
::-webkit-scrollbar {
display: none;
}
I don't know if it is possible to override this style so probably you have to remove it. Similar question.
I'm currently updating a pretty old website (last update was around 2001), and have agreed to use HTML5 and CSS3.
For the general design, I'm working on a very clean white and gray tones style, with many paddings and margins. My problem resides in the home page: I'd like to have a 3-column centered layout. But where to start? I've tried some floating, but in vain.
Am I doing this right ?
HTML:
<div class="colwrapper">
<div class="ltcol"></div>
<div class="ctcol"></div>
<div class="rtcol"></div>
</div>
CSS:
.colwrapper { width:1020px; }
.ltcol, .ctcol, .rtcol { width:300px; margin:0 10px; padding:10px; }
.ltcol { float:left; }
.ctcol { margin-left:340px; }
.rtcol { float:right; }
your css should be like this:
.ltcol, .ctcol { float:left; }
.rtcol { float:right; }
The purpose of the CSS float property is, generally speaking, to push a block-level element to the left or right, taking it out of the flow in relation to other block elements. This allows naturally-flowing content to wrap around the floated element. This concept is similar to what you see every day in print literature, where photos and other graphic elements are aligned to one side while other content (usually text) flows naturally around the left- or right-aligned element.
For More details you must have to read this intresting article.
See This Demo: http://jsfiddle.net/akhurshid/YRWLV/
Your HTML is very clean - this is a great step forward.
You need to add a float: left to all the columns. To ensure the float is cancelled after your columns, it is best to add a clear div after the floated columns.
HTML:
<div class="colwrapper">
<div class="ltcol">Column 1</div>
<div class="ctcol">Column 2</div>
<div class="rtcol">Column 3</div>
<div class="clear"></div>
</div>
CSS:
.colwrapper { width:1020px; }
.ltcol, .ctcol, .rtcol { width:300px; margin:0 10px; padding:10px; background-color: #efefef }
.ltcol { float:left; }
.ctcol { float:left; }
.rtcol { float:left; }
.clear { clear: left; }
So you add css3 tag for this questio so I suggest you to make this with css3 column layout:
More info
for example
HTML
<div class="colwrapper">
<div>text</div>
</div>
CSS
.colwrapper div
{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;
}
It does not work on IE.
Use one of these tried and tested implementations instead of rolling out your own. In addition to the fact that you'll be getting tested and working code, you'll add responsiveness to your site with almost zero effort.
http://cssgrid.net/
http://960.gs/
http://framelessgrid.com/
http://goldengridsystem.com/
and lots more if you google..
could also use Flexbox property for this now as well so you don't need to worry about floats or clearfix's.
main{
/* .colwrapper{ */
display: flex;
flex-flow: row;
justify-content: center;
}
main > section{
/* .ltcol,.ctcol,.rtcol{ */
display:flex;
flex-flow:column;
align-items:center;
padding:10px; padding:.625rem;
}
main > section:nth-child(2){
/* .ctcol{ */
margin:0 20px; margin:0 1.25rem;
}
http://caniuse.com/flexbox shows the support for it isn't quite as far along as you would probably like, however, there are ways to improve support by mixing old versions of the syntax with the new http://css-tricks.com/using-flexbox/ has a great write up on it from Chris Coyier if you want to play with this for a next project (this post is fairly old). You can also get more details at http://html5please.com/#flexbox
Also, if you're using HTML5 I'd probably go with sections over divs for a more semantic structure, so a comparison would look something like this:
<main>
<section></section><!-- or <nav></nav> -->
<section></section><!-- or <article></article> -->
<section></section><!-- or <aside></aside> -->
</main>
instead of...
<div class="colwrapper">
<div class="ltcol"></div>
<div class="ctcol"></div>
<div class="rtcol"></div>
</div>
Just try putting the rtcol div beofre le ltcol div.
<div class="colwrapper">
<div class="rtcol">X</div>
<div class="ltcol">X</div>
<div class="ctcol">X</div>
</div>
http://jsfiddle.net/EDjpy/
I have an app built on Cordova and on some of my pages I am able to scroll horizontally out of my content into white space.
This is weird as I have nothing there that extends beyond my #wrapper, which is set to width: 100%.
So I was wondering if there was a way I could disable horizontal scrolling in the app altogether?
UPDATE:
Code on page as requested:
body {
background-color: #fff;
font-family:Arial, Helvetica, sans-serif;
color: #b7b8b9;
height: 100%;
width: 100%;
}
iframe{
border: none;
width: 100%;
/*margin-top: 50px;*/
}
#header{
height: 50px;
width: 100%;
}
<body>
<div id="wrapper">
<div id="header">
<div class="headerback">Home</div>
<div class="headerrefresh"><script>var pathname = window.location.pathname;</script><script>document.write('Refresh')</script></div>
<div class="headertitle"><h2>Get the Look</h2></div>
</div><!--HEADER-->
<iframe src="http://www.mbff.com.au/getthelook"></iframe>
</div>
</body>
Try to debug your page in Chrome (webkit) with the exact dimensions of your device. This solves most rendering issues for me.
I do not know the specific issue here, but it looks like one of your elements is flowing outside of the wrapper. You could for example try this in your css:
div.wrapper { overflow: hidden; width: inherit; }
Although it might be a better idea to find out why your page is expanding horizontally?
I was looking for the solution to this problem for a long time.
Finally I solved it in the following way.
I set style for bodyand html tags:
position: fixed;
width: 100%;
height: 100%;
overflow: hidden;
After that I've added div to body and set the style for it:
overflow-y: auto;
height: 100%;
So, I have got fixed body, which contains div with vertical scroll bar.
// Phone Gap disable only horizontal scrolling in Android.
// Add this code in your Phone Gap Main Activity.Initially Declare the variable
private float m_downX;
//Then add this code after loadUrl
this.appView.setOnTouchListener(new View.OnTouchListener() {
public boolean onTouch(View v, MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN: {
// save the x
m_downX = event.getX();
}
break;
case MotionEvent.ACTION_MOVE:
case MotionEvent.ACTION_CANCEL:
case MotionEvent.ACTION_UP: {
// set x so that it doesn't move
event.setLocation(m_downX, event.getY());
}
break;
}
return false;
}
});
Try adding the following code to your .html file:
document.body.addEventListener('touchmove', function(event) {
event.preventDefault();
}, false);
For the sake of completeness, I thought the answer which makes use of the official method of doing such a thing via the preference tag should be added:
<preference name="DisallowOverscroll" value="true"/>
Supported by Android and iOS according the documentation.
Default: false
Set to true if you don't want the interface to display any feedback when users scroll past the beginning or end of content. On iOS, overscroll gestures cause content to bounce back to its original position. on Android, they produce a more subtle glowing effect along the top or bottom edge of the content.
In my case it was broken styling like below
<body>
<div style="margin-left:5%; width:100%">Content</div>
</body>
which cause div to became horizontally bigger than body. I could see scroll when app run in browser. Set width to 90% (as it was initially intended) fixed the problem.
Generally, as it already pointed out here, enough to find element with wrong style which makes your page expanding horizontally and fix it.
BTW DisallowOverscroll was not helpful in above case.
Is it possible to specify a position (left or right hand side) for the placement of a vertical scrollbar on a div?
For example look at this page which explains how to use the overflow attribute. Is there some way of placing that scrollbar on the left hand side of the scrollable area?
You could try direction:rtl; in your css. Then reset the text direction in the inner div
#scroll{
direction:rtl;
overflow:auto;
height:50px;
width:50px;}
#scroll div{
direction:ltr;
}
Untested.
.list_container {
direction: rtl;
overflow:auto;
height: 50px;
width: 50px;
}
.item_direction {
direction:ltr;
}
<div class="list_container">
<div class="item_direction">1</div>
<div class="item_direction">2</div>
<div class="item_direction">3</div>
<div class="item_direction">4</div>
<div class="item_direction">5</div>
<div class="item_direction">6</div>
<div class="item_direction">7</div>
<div class="item_direction">8</div>
<div class="item_direction">9</div>
<div class="item_direction">10</div>
<div class="item_direction">11</div>
<div class="item_direction">12</div>
</div>
Working Example: JSFiddle
or
Cut and paste solution that works for all major browsers (Even Safari)
Any height or width will work
<style>
.list_container {
direction: rtl;
overflow:auto;
height: 50px;
width: 50px;
}
.item_direction {
direction:ltr;
}
</style>
<div class="list_container">
<div class="item_direction">1</div>
<div class="item_direction">2</div>
<div class="item_direction">3</div>
<div class="item_direction">4</div>
<div class="item_direction">5</div>
<div class="item_direction">6</div>
<div class="item_direction">7</div>
<div class="item_direction">8</div>
<div class="item_direction">9</div>
<div class="item_direction">10</div>
<div class="item_direction">11</div>
<div class="item_direction">12</div>
</div>
Optionally add class="item_direction to each item to change the direction of the text flow back, while preserving the container direction.
Kind of an old question, but I thought I should throw in a method which wasn't widely available when this question was asked.
You can reverse the side of the scrollbar in modern browsers using transform: scaleX(-1) on a parent <div>, then apply the same transform to reverse a child, "sleeve" element.
HTML
<div class="parent">
<div class="sleeve">
<!-- content -->
</div>
</div>
CSS
.parent {
overflow: auto;
transform: scaleX(-1); //Reflects the parent horizontally
}
.sleeve {
transform: scaleX(-1); //Flips the child back to normal
}
Note: You may need to use an -ms-transform or -webkit-transform prefix for browsers as old as IE 9. Check CanIUse and click "show all" to see older browser requirements.
I have the same problem. but when i add direction: rtl; in tabs and accordion combo but it crashes my structure.
The way to do it is add div with direction: rtl; as parent element, and for child div set direction: ltr;.
I use this first https://api.jquery.com/wrap/
$( ".your selector of child element" ).wrap( "<div class='scroll'></div>" );
then just simply work with css :)
In children div add to css
.your_class {
direction: ltr;
}
And to parent div added by jQuery with class .scroll
.scroll {
unicode-bidi:bidi-override;
direction: rtl;
overflow: scroll;
overflow-x: hidden!important;
}
Works prefect for me
http://jsfiddle.net/jw3jsz08/1/
No, you can't change scrollbars placement without any additional issues.
You can change text-direction to right-to-left ( rtl ), but it also change text position inside block.
This code can helps you, but I not sure it works in all browsers and OS.
<element style="direction: rtl; text-align: left;" />
Here is what I have done to make the right scroll bar work. The only thing needed to be considered is when using 'direction: rtl' and whole table also need to be changed. Hopefully this gives you an idea how to do it.
Example:
<table dir='rtl'><tr><td>Display Last</td><td>Display Second</td><td>Display First</td></table>
Check this: JSFiddle
There is a dedicated npm package for it. css-scrollbar-side