I've been searching for a way to remove the scrollbars on a page while still allowing scrolling, but I've found that the general consensus is that you'd need to add additional elements that wrap your existing content.
Maybe I'm missing something. Is there any way, using CSS and JS, to remove the vertical scrollbars while still allowing scrolling without adding additional elements around my content?
The reason I ask is because I'm hoping to implement it into a jQuery plugin that effectively hides the scrollbars in favor of the plugins functionality, and I'd rather not wrap the plugin-user's page with additional elements for the sake of conflicting with their styling.
Any help is much appreciated.
Currently there isn't. Browsers don't support it. Facebook and other sites that implemented their own scrollbar functionality replacing the browser's use a technique to push the browser provided scrollbar out of the visible container and render their own scrollbar to be visible.
Related
I have an iframe that has quite a bit of white space tacked onto the end of visible elements. In fact, I know that the iframe is loading the size of all my elements including hidden elements. These elements were meant to be hidden until some knockout questions are answered, at which point the iframe should resize accordingly.
The other battle I am fighting with this is the fact that I am also having to deal with two scroll bars, one for the iframe, and of course the web page scroll bar. This is just very tacky and not very user friendly.
This is a problem I inherited, so I am hoping for a solution involving the iframe. I am also willing to explore other solutions as maybe this is not the most appropriate as it is.
To get rid of scroll bars, try adding scrolling="no" to the iframe.
HTML iframe - disable scroll
You might update the height of the <iframe> from the framed page using JavaScript after a new element is shown.
function resizeParent() {
if (!window.parent) return;
var height = $(document).height();
$(window.parent.document).find('iframe').height(height);
}
Demo
Source of framed page
Note, this will only work if both pages are loaded from the same domain.
Use both the inline style attribute style="overflow:hidden;" as well as the attribute scrolling="no". overflow:hidden is the proper HTML5 counterpart, so it's best to mix both.
Edit: In fact, if it is suited for your case, try using the iframe seamless boolean attribute. It practically makes the iframe styled as if it's part of the containing document, including no borders or scrollbars. I recommend it because it's like a one-stop for what you need to accomplish, and it does the work for you. You can try a combination of all the three attributes I recommended for ideal browser compatibility.
I'm searching for a jQuery plugin which adds custom scrollbars to a div. I know, there are tons of plugins like this out there and i tried about 10 of them now with no success because i need a plugin with some very special features and i was wondering if anyone knows one which comes near.
Its very important that the plugin does not poll for changes of its content (setInterval) or that it can at least be disabled.
It must be possible to tell the plugin to update itsself manually when i know that its contents has been changed
The most important thing (which seems to be the thing that is missing on most plugins): the original element reference must be kept.
So if i do:
$("#myElement").coolScrollbarPlugin();
$("#myElement").append("<h1>New Content</h1>");
$("#myElement").coolScrollbarPlugin("update");
the plugin needs to recognize this. In the best case, the plugin takes the jquery element i applied the plugin on as its content pane to recognize any manipulation done on the element.
What i can't do:
$("#myElement").coolScrollbarPlugin();
$("#myElement").coolScrollbarPlugin("getConentElement").append("<h1>New Content</h1>");
$("#myElement").coolScrollbarPlugin("update");
This limitation is due to the surrounding application framework which will do manipulations on the scrollable elements that i'm not able to affect.
Are there any plugins that you know matching all this criteria?
Are there other ideas on how to achieve this?
If you get scrollable element by id or assign element to variable before applying scrollbar, you can try jQuery Scrollbar. The only change that is made - element is wrapped into another element with the same classes (to apply CSS styles of source element's height/width & design for scrollbar).
You can disable content/container size cheking using option autoUpdate:false and call init function to recalculate scrollbar sizes after update.
I wanted to know if there are some javascript libraries that handles parallax scrolling, with panes, but without using scrollbars ?
My client doesn't want any scrollbars and the website works like panels that show when you scroll.
I tried Skrollr, but when I overflow : hidden, it doesn't work.
thanks
I think you always have to write some code to "parallax" the whole thing , but, I once used this library
jQuery mousewheel
https://github.com/brandonaaron/jquery-mousewheel
because I did not want scrollbar's in my website , it was really helpful. It allows you to detect scrolling in every div of your document , so you're not obliged to bind action to window.scroll.
The only issue if you're not using jQuery is that this library requires it.
Anyway I think that jQuery is always a good idea.
I've searched high and low for a tutorial but I can't find one.
It is really a simple task that I see in lots of websites.
Pretty much like I have a menu, with a set width, and if my link is extra long, I want the overflow to be hidden, and when the user mouseovers the link, it will marquee the rest of the text.
It really shouldnt be this hard cuz I see it in lots of websites.
I really want to avoid using the marquee tag and go for javascript instead but my javascript is quite horrible and jquery is absolutely impossible to follow.
Any suggestions?
Try this:
http://jsfiddle.net/bryanjamesross/vsQFE/4/
The trick is that you will need individual container elements with overflow:hidden and set widths for each link, otherwise the whole container will scroll, instead of each link. In my example, I contained each <a> inside <li> tags that had set widths and overflow:hidden.
Then it's just a matter of hooking up the jQuery and animating correctly.
edited: fixed an animation bug, and made a the code a bit easier to follow
Just add this to your element
onmouseover="this.style.overflow=''" onmouseout="this.style.overflow='hidden'
Did it help?
Need to display an element (div) ontop of webpage. During scroll the element should disappear and reappear after scroll ends.
To add to the complexity:
our code is a guest code (thus we cannot manipulate DOM structure etc).
our code is intended to work on iPhone/iPad (mobile Safari browser)
We've tried to listen to touchstart event on document / body and hide the element (div) in our dedicated handler. However, in some sites, (when DOM structure becomes reasonably complex) the scroll response time increases significantly, even if handler implementation is entirely empty.
We are looking for the proper way to manage the element (re)appearance with a minimal affect of the user experience while scrolling.
I would think Javascript is your best solution. You can dynamically insert your DIV to any content using document.createElement, then also add some javascript to listen for onScroll...
You could even populate the DIV using custom HTML built from the native code if you want.
Any help?
I don't know if you are a jQuery user, but this .scroll() function may help you do exactly what you want to do. Check out the demo to see how it works.
http://api.jquery.com/scroll/
In recent iOS version (5.x) fixed positioning (position:fixed in CSS) is fluently supported, so that your element will be positioned on screen coordinates. That might be a good starting point for solving your troubles.