I have been wondering for quite a while now how can you achieve this: https://www.apple.com/mac-pro/
As I put it in my own terms, removing the scrollbar or hiding it. I know you can easily put overflow:hidden but that wouldn't really solve the problem, as in Chrome for example it will not let you scroll with the mouse-wheel (pretty annoying).
I've been looking for quite a while now how to achieve something similar to that, which by the way I have no idea how to call it (again I search it as hiding the scrollbar, removing scrollbar) but no success yet.
If anyone can point me to the right direction, that would be really awesome!
I think that the page does not fill more than the window , so that is why there is no scroll bar. When you do scroll up or down , there are most likely event listeners that are just altering the content.
body { overflow:hidden } would work in some browsers , but not all - So , to avoid having a scroll bar, just don't have the content get larger than the window.
It seems like a slightly altered take on Parallax Scrolling.
If you google for it, you can find a million and one different ways of doing it, tutorials, examples, templates, etc.
Change overview.css on line no 10
position: fixed;
Remove following from overview.css on line 415 and 8
overflow: hidden;
Just add the code below to your css file.
::-webkit-scrollbar {
display: none;
}
Caution !
This will disable all the scrollbar so be sure to put it in a specific class or id if you just want one to be hidden.
Related
There was a similar question asked on here (not enough information was given) so no real solution was presented. I am using MixItUp to filter content within a framework (Foundation) based on a button being clicked. I noticed a weird movement that happens when a button is clicked. I have uploaded the files to be viewed here
http://cantaloupecreative.info/filter-code-snippet/
After the animation fires, I see page elements jump to the right a bit. If that's what you're referring to, take a look at the scroll bar. When there aren't enough elements on the page, the scroll bar disappears and everything re-centers, which is likely what you're seeing. You can avoid this by permanently enabling or disabling the scroll bar with CSS
overflow-y: scroll;
or something similar.
Okay here is what I uncovered in my search for a solution. WebKit is overriding the css change I am making to my body class. You cannot use overflow-y in chrome because of this. Now when I was making the change to my sass file it wasn't compiling correctly. After hardcoding the webkit fix into my stylesheet I was able to remove the scrollbar on all toggled divs with the following code.
::-webkit-scrollbar {
display:none
}
Obviously this only fixes half of the problem because now I am without a scrollbar. But it atleasts fixes the hoping issue.
Im working on a Website and everything is ok, except my webside is "shaking". (I'm using chrome)
The margin of my main Container is changing on some sides and i have no idea why. They have the same html code, it must have something to do with the content in the main div-container
My Website: www.anitalernt.de
http://www.anitalernt.de/about-us.html is a bit more to the left and http://www.anitalernt.de/index.html after getting a task (just click some buttons) also.
Has someone a idea?
Always display the scrollbar
html {
overflow-y: scroll;
}
See:
Always show browser scrollbar to prevent page jumping
How to always show the vertical scrollbar in a browser?
You could add
html{ overflow-y: scroll;}
to your css.
Places a permanent (but sometimes empty) scroll bar on the window
The issue is most likely caused by the scrollbar appearing, which reduces the viewable area of the browser window and may adjust the contents accordingly.
There are a couple possible workarounds:
You could extend the length of the adjusted web-page so that the content (post-adjustment) also runs "below the fold"
Alternatively, you could encase everything in an absolute positioned DIV which won't "shake" when the viewable area contracts on the scrollbar's appearance.
Or -- depending on your specific content -- you could disable the scrollbar. Although this last workaround is only advisable in very specific cases.
body{
margin: 0;
}
seems to resolve this without having to add a dummy scrollbar :)
I had the same problem because of jQuery scroll where I was checking the scroll value and using that. I fixed my navigation bar by using addClass and removeClass, adding class was not working because I did not use !important in CSS class.
I am creating a shadowbox on my website that will pop up and allow users to pick from a number of options including some in submenus. The content within the shadowbox is going to be pretty extensive, so it needs to be able to scroll vertically and not scroll horizontally.
The problem I have is that the submenus are supposed to pop out to the right of the list and overflow to the outside of the shadowbox. This worked until I implemented overflow-y: scroll; in the CSS. Now, even if I use overflow-x: visible; it still acts as though the x-axis should scroll.
Has anyone encountered this problem before or have any tips on how to approach it?
try messing with a jsfiddle here
See http://www.w3.org/TR/css3-box/#collapse-scroll:
The computed values of ‘overflow-x’ and ‘overflow-y’ are the same as
their specified values, except that some combinations with ‘visible’
are not possible: if one is specified as ‘visible’ and the other is
‘scroll’ or ‘auto’, then ‘visible’ is set to ‘auto’.
I can't think of anything to solve this issue using CSS only, but it should be possible with JavaScript if dropdowns are outside the block with overflow: auto
I have a menubar(div) which houses bookmarks and when too many bookmarks are inserted this menu bar(div) becomes too wide for the preferred page size(1280, 720) and becomes scrollabe, leaving half of the bookmarks out of view.
I want to ensure that all the bookmarks are in view and the best option seems to be that I have to make the extra bookmarks appear on the next line. can someone guide me in the right direction or better yet provide a working sample. Im just learning to use jquery and am finding this very difficult.
Example code in jsfiddle
You have this in there on the ul element.
white-space: nowrap;
Which means that that element's contents will never wrap to another line, so it extends out past the edge of the window instead. Remove that rule, and you have something closer to what you want. That is, when you content overflow one line, you want it to wrap to the next line.
http://jsfiddle.net/y9a64/9/
http://jsfiddle.net/bH8yA/
Are you looking for a solution like that? If so, it's straight CSS.
You can achieve that by using css overflow-x: auto; please see example http://jsfiddle.net/Xa8yB/6/
I have a div.
I want that user should not be able to scroll the page if the height is more than 350px.
Also the scroll bar should be visible in disable mode in that case.
I want to achieve this using javascript.
Thanks
I can't say I completely understood what you want, but I think what you're looking for is CSS not javascript. Take a look at the overflow property.
Seems like you're looking for overflow: hidden; perhaps?