I have divs that are placed off-screen.
I have disabled scrollbars like so:
body {
overflow: hidden;
}
Currently, when I highlight text and drag the mouse outside the window, the body still scrolls.
How can I prevent this behaviour? (Setting offscreen elements to display: none is not an option.)
Thanks!
Travis
What browser is this happening in?
Where, off-screen, are the divs positioned? If they are off to the left or right, you could try using a negative top margin instead, as users are unlikely to highlight "up".
Related
I have a div that has fixed position and bottom 0 to display at the bottom of the window.
My problem is when window resize, this div move to up and into other elements. For example when I open console box in chrome this div jump to other elements in facebook fix position such as friend list, when I open console box, element jump to up but hidden up element.
Please help me how I can fix div in window resize.
CSS Position Fixed:
Do not leave space for the element. Instead, position it at a
specified position relative to the screen's viewport and doesn't move
when scrolled. When printing, position it at that fixed position on
every page. Fixed positioning is similar to absolute positioning, with
the exception that the element's containing block is the viewport.
This is often used to create a floating element that stays in the same
position even after scrolling the page. - by Mozilla MDN
In other words, When you use position: fixed; that takes elements out of the document's regular flow.
How I can fix div in Window Re-size?
Solution: There's no way to do it as you want using CSS. You must remove position: fixed; because when you set bottom: 0px with position: fixed; to your element then it doesn't matter that what is the size (vertical) of your browser or window because position: fixed; element will always appear on the bottom of the viewport screen at 0px.
You can use
position: fixed
or
`position:absolute`
Ok, so there is a webpage with a long list. In the middle of the list I'd like to lock the scrolling and later enable it again. How would this be possible, so that it would behave nicely in modern mobile browsers?
One solution I tried is to set body position style to fixed and the setting top style to the scrollTop value prior to the setting position to fixed. There is this thing about position: fixed - as soon as it is set, the page will be jumped to the top. Problem is that on iOS Safari the page is sort of flashes when you enable/disable scroll, and it also gets really laggy behaviour on Android Chrome.
Any better hints?
Update: I have a sidebar menu with list of items, and while the main page should be locked, sidebar menu should remain scrollable.
Just add a class to the html-tag every time you want to look the screen. I use this method on js modals or lightboxes.
You can do this simply by adding the overflow attribute.
.
CSS:
html.-is-locked {
overflow: hidden !important;
}
.
JS:
Now you just have to add/remove the class with javascript:
//Get HTML element
var html = document.querySelector('html');
//Activate
html.classList.add('-is-locked');
//Deactivate
html.classList.remove('-is-locked');
//Toggle
html.classList.toggle('-is-locked');
Try this on the body instead of position:fixed:
body.locked{
height: 100vh;
overflow: hidden;
}
It will keep the scroll position but prevent scrolling.
I have a position: fixed div besides a div with long text inside a div with overflow: scroll. I want the text to scroll even if my cursor is hovering over the fixed div (which is the normal behavior when the window would be the scrolling element).
I made a fiddle: http://jsfiddle.net/jM2Eh/1/
I basically want the text to scroll while scrolling hovering over the red box.
UPDATE: I am using Twitter bootstrap in this particular case and updated the fiddle accordingly.
If JavaScript is needed for that, that would also be ok.
UPDATE2: I also tried this solution, but that causes weird flickering effects:
http://jsfiddle.net/jM2Eh/16/
Have you tried using padding-left on your text node instead of using two columns?
http://jsfiddle.net/j5BLm/15/
.text {
padding-left: 50%;
}
Another possible solution is to use pointer-events: none if you don't care about IE:
http://jsfiddle.net/codedigger/jM2Eh/18
I have some content I want to show in iframe with fancybox. When I use it, it pops up with horizontal and vertical scroll bars even though all the content is inside of it. Inspecting it in Firefox shows that when I click on html everything is inside but there is a little left over that is outside of the highlighted box. The next level up is iframe.fancybox-iframe which includes the scroll bars. I looked at the css and that has padding and margins set to zero so I don't know why the scroll bars are there. Right now as far as options I just have autoSize:false. All I have inside the body of the page I want to show is a form.
If anyone wonders which class name to use
.fancybox-inner {
overflow: hidden !important;
}
And if you found a small white background you can reset it using
.fancybox-skin {
background: inherit;
}
Try adding this to the css:
.style{
overflow: hidden;
}
If it didn't help, please post your HTML and CSS.
1) If you have a Google Plus account, go to your home page.
2) On the right side, there's a list of "Add to Circle" buttons that you can hover over.
3) Notice that when you hover over one of the Add to Circle dropdown (if you have enough circles to have scrolling in the dropdown) the page scrolling feature is disabled. Only scrolling vertically in the dropdown is allowed.
How is this done with javascript?
I can scroll in here (the scroll bar on the right), but can't scroll on the page body while this is dropped down.
The have an element that has a fixed height and is overflow auto, they styles the scrollbar with this trick: http://beautifulpixels.com/goodies/create-custom-webkit-scrollbar/
You could make it work in FF and IE to: Basically you nest a element that is overflow auto into a other and hide the scrollbar with a negative margin. Then you capture the scroll event on that same element and adapt the slider on the right side according to the scrollTop position.
Here is how i would do it: http://jsfiddle.net/kGbbP/4/
But there are many jquery plugins that can do this:
http://www.net-kit.com/jquery-custom-scrollbar-plugins/
this isn't made via JavaScript!
It's pure CSS, and works only on (non-mobile) webkit based browsers.
Here is the CSS code, just include it in a CSS file, attach it to an HTML document, and run the .html file.
Here is a demo: http://jsfiddle.net/3ZqGu/
And here is the CSS code:
::-webkit-scrollbar {
background:transparent;overflow:visible; width:15px;}
::-webkit-scrollbar-thumb {
background-color:rgba(0,0,0,0.2); border:solid #fff;}
::-webkit-scrollbar-thumb:hover {
background:rgba(0,0,0,0.4);}
::-webkit-scrollbar-thumb:horizontal {
border-width:4px 6px;min-width:40px;}
::-webkit-scrollbar-thumb:vertical {
border-width:6px 4px;min-height:40px;}
::-webkit-scrollbar-track-piece{
background-color:#fff;}
::-webkit-scrollbar-corner {
background:transparent;}
::-webkit-scrollbar-thumb {
background-color: #DDD;}
::-webkit-scrollbar-thumb:hover {
background-color: #999;}