I am removing horizontal scroll bar completely from bottom. I tried this below ways.
1st way
Hide html horizontal but not vertical scrollbar
This way is working when the page is first loaded. But when I click on the UI. Bottom scroll bar is appeared but not scrollable and disabled. So UI shrinks slightly and disabled scrollbar is shown at the bottom.
2nd way
::-webkit-scrollbar {
display: none;
}
::-moz-scrollbar {
display: none;
}
::-o-scrollbar {
display: none;
}
This removed all scroll bar from UI. Not even the vertical scroll bar is shown. Even onclick, neither vertical nor horizontal scroll bar is shown.
Is there a way to remove horizontal scroll bar completely in this way ?Not even shown when the UI is clicked.
By bottom scroll-bar, I assume you are referring to the horizontal scrollbar. This appears when you have content that overlaps the width of your element.
As a best practice, you should align your content so it's viewable without horizontal scrolling. You might even want to include some padding to make it easier on the eyes.
But if it's required, you can set the overflow-x property and set to hidden.
With the hidden property, the content is clipped, scrolling is disabled and the scrollbar doesn't appear.
http://www.w3schools.com/cssref/css3_pr_overflow-x.asp
Related
Please take a look at this codepen:
https://codepen.io/darrengates/pen/BarZMYr
In this example, you'll see that I'm using "react-virtualized", with the "List" container type. In addition, to achieve the effect of making the left column sticky on horizontal scroll, I had to add this CSS:
.ReactVirtualized__Grid.ReactVirtualized__List {
overflow: visible !important;
}
.ReactVirtualized__Grid__innerScrollContainer {
overflow: visible !important;
}
However, when I did this, react-virtualized no longer loads additional data on scroll.
Removing that extra CSS allows react-virtualized to work as it should, but then I lose the stickiness of the left columns (which of course it expected on account of an ancestor having overflow: scroll)
Is there any way to "force load" more of the list so that I can continue to use a sticky column?
Currently on my single page site when you click on the Bootstrap navbar menu items it takes you to the section of the page with that div #ID. However, naturally because the top of the navbar lines up with the top of the new section my content is overlapped by the width of the navbar (80px or 50px when collapsed).
Screenshot of issue:
"Ready to book" heading is actually centered in the middle of that div but overlapped by 80px of navbar.
Screenshot showing top of page:
The issue is that I do not wish for the navbar to overlap the content in the section I have linked to. Put in other words, I would like the top of bottom of the navbar to line up with the top of the new section div.
Surely this can be handled using some JS to offset the navbar up by the height of the the navbar?
I have had a suggestion to use CSS to add padding into the top of section but this adds an extra 80px of padding that I don't want, when normally scrolling the page.
Okay so I found two solution to this finally using JS and CSS
here.
My preference is for this CSS solution:
#id:before {
display: block;
content: " ";
margin-top: -80px;
height: 80px;
visibility: hidden;
}
Obviously, replace ID with the ID of the anchor.
The actual JS snippet solution:
var shiftWindow = function() { scrollBy(0, -50) };
window.addEventListener("hashchange", shiftWindow);
function load() { if (window.location.hash) shiftWindow(); }
However, it is still a bit clunky as you can actually see the the browser scroll to the anchor point and then back up by the scrollBy offset amount of 80px.
I am not sure if this problem has been solved yet, but I had the same problem and adding the appropriate heading worked (by appropriate padding I mean the height of your navbar element).
For example:
#id { padding:50px }
I am editing a Squarespace template and would like to create a sticky navigation sidebar.
There's a Squarespace field where I can enter "Custom CSS."
I already have the sidebar, but how do I modify the CSS to make it stick? I want it to remain visible when I scroll below the fold.
My pageBodyWrapper div is centered (auto/auto) and contains both the contentWrapper div and the sidebar1Wrapper div, on the right.
I have tried
#sidebar1Wrapper
{
position:fixed;
}
with either a left or right value in px or %, but whenever I change window size, the sidebar is either going away from the content or overlaps with it.
How do I prevent this from happening?
Can I define my fixed position relative to the contentWrapper div?
Thank you for your help!
Here's the site I am talking about: Last Wave Film.
Unfortunately that functionality is not yet built into css. It is done with javascript. Essentially the javascript detects when the page has scrolled to the top of and then sets the sidebar to position: fixed.
Here's a solution that uses the jQuery library: http://css-tricks.com/persistent-headers/
You can make the sidebar fixed using css and it will be permanently fixed within the browser window.
.sidebar1Wrapper {
position: fixed;
top: 20px;
right: 40px;
}
html:
<div class="div_fixed"></div>
<div class="other_content">
content goes here
</div>
css:
.div_fixed{
position:fixed;
height:40px;
}
.other_content{
height:200px;
}
The div_fixed will remain fixed at the top position of the page.
But as the page scrolls up, the content of the div other_content will vanish just at the lower edge of the div div_fixed .
In the case of scrolling down the invisible content of other_content will begin to be visible from the lower edge of the div_fixed
How to achieve that ?
EDIT: no scroll bar should appear for any div
Use overflow: hidden to get rid of scrollbars
Is this what you're looking for? http://jsfiddle.net/BCRPa/
I've taken your HTML/CSS and added a bit on a jsFiddle - I think in order to achieve the effect you're looking for, you just need to make your content actually tall enough to be scrollable. At 200px high and one line of text, nothing is going to scroll.
So I made your other_content div taller, and then added a top: 0 to your .div_fixed selector, to keep it stuck to the top of the screen, and a margin-top: 40px to the .other_content div in order to have it start below the floating div.
If you want it to be a navbar-type thing, you can of course add a width: 100% to the .div_fixed.
All of this should transfer into a container div (with position: relative) fairly easily as well if you want, although you may have to re-position the fixed div.
I know how to hide scroll bar. But without a scroll bar, I would like to scroll whatever there is to scroll.
This is what I did, it hides initially, and as mouse hovers, vertical scroll bar shows.
div#LogoStrip{
height:600px;
overflow:hidden;
}
div#LogoStrip:hover{
overflow-y:scroll;
overflow-x:hidden;
}
But on hover, I don't want to see scrollbar but still would like to scroll the text/images that are present there, using wheel or two small buttons, 1 at top and 1 at bottom.
div#LogoStrip{
height:600px;
overflow:hidden;
}
+ javascript
can you help with Javascript/jQuery ?
You could use jQuery to implement your own custom scroll bar using jScrollPane or another similar plugin.
If you really want to code this yourself (and I would again caution against it), you can look through the jScrollPane code. The basic idea is that you have a div within a div, one will hid the contents of the other when set to an offset. You have to capture the scroll wheel event and change that offset.