Google Plus - Scroll in div, prevent body scroll? [duplicate] - javascript

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;}

Related

jQuery waypoints and changing waypoints

Only my second question here (so go easy please!).
I've been trying to use jQuery waypoints to hide and show a border under my navigation based on scroll position.
For example whilst the sticky nav is over the slider image - there will be no border, however when the nav is scrolling over content, the border will appear.
Please see: http://thestylebar.co.uk (inspect element in chrome/safari)
Once the user scrolls to the waypoint the css property is changed however when the user scrolls back up the class doesn't return to its default state how can I amend this? Also, the script doesn't seem to work on the homepage?
$(function() {
$('.l-main-h').waypoint( // .l-main-h is the content area
function() {
$('.strip').css({"border-bottom":"none"});
}
)
});
http://jsfiddle.net/F5A3y/
You would have to test the direction that waypoints provides. Also, I wouldn't inline CSS like that. You should just toggle a class.
This isn't tested but it should get you close.
$('.l-main-h').waypoint(function(direction) {
$('.strip').toggleClass('bordered', direction === 'down');
});
Then your CSS would be like:
.strip.bordered {
border-bottom: 2px solid #fff;
}

Get rid of useless scroll bars on fancybox iframe

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.

jQuery: How do I scroll the body without showing the scroll bar?

I'm trying to hide the scroll bar of the document (in some browsers it's the body element, in others it's the html element) by using overflow:hidden;. Then i'm using jQuery.animate() to try and animate the scrollTop property. It works fine when the scroll bar is visible (i.e. without the overflow:hidden; style) but doesn't work when the scroll bar is hidden. Why is that? I'll be able to post a link to a snapshot of the problematic page in a bit...
Try make <body> overflow:hidden and animate the margin-top property, note the margin-top should be negative if you want a positive scrollTop.
On webkit you could use ::-webkit-scrollbar: { display: none; } to hide the scrollbar with scroll features enabled.

Always on top html block for iPhone

How can I create a DIV block that always stays at the bottom of my page? When scrolling more content should show up right above the block. The only solution i can think of is to use 2 iframes but I prefer using CSS.
Update: The solution needs to work on iOS
Here's some CSS:
.bottomFixed {
position:fixed;
bottom: 0;
/* technically not necessary, but helps to see */
background-color: yellow;
padding: 10px;
}
Here's some HTML:
<div class="bottomFixed">Hello, world!</div>
This div would be placed at the bottom of the screen and stay there. Note: this won't work on iOS because of the way it does scrolling.
div.bottom {
position:fixed;
}
Then just move it where you want. Unfortunately, browser support is limited. IE6 for example doesn't support this option for position. Also note that this removes the div from the flow, so you'll have to make sure there's enough space for the viewer to see stuff at the bottom of the page with the div on top.

How do I prevent selection scrolling in the body

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".

Categories

Resources