I'm using those:
body{ -ms-overflow-style: none;} /* for ie hiding scroll bar */
body::-webkit-scrollbar{display:none;} /* chrome hiding scroll bar*/
body{overflow:-moz-scrollbars-none;}/* hides the scroll bar for Firefox */
to hide the default browser scrollbars, it is all fancy & dandy for chromie & IE ( yay ! ),
although in Firefox I'm loosing the ability to scroll with mouse scroll, what is weird is beside that I can scroll, but only with Up/Down arrows or pageUp/pageDown keys.
Is there something that I can do to re-enable scrolling with mouse wheel in Firefox?
In the post that I've found all of those neat lines of code the author said that we need to implement this as well for Firefox:
$(function() {
jQuery.scrollSpeed(100, 800);
}); // for page scrolling
But it does not work for me, or maybe I'm doing sth wrong.
Thx for stopping by o/
Related
I have a popover that works perfectly fine with Safari, Chrome and IE but doesn't work in Firefox, (it doesn't appear).
I have created a jsfiddle to illustrate the problem:
https://jsfiddle.net/sregorcinimod/7x4vuwLr/8/
When you click on the blue rectangle a popover should appear.
The problem line is the fact that i have a position:absolute on the svg
#spacing svg{
max-width:100%;
position:absolute; //this is the line that is causing issues
bottom:0px;
}
If I remove that line the popover appears but I need that in for other things.
The constraints are:
I need to have position:absolute on the svg due to other more complex things that aren't in the jsfiddle i.e. responsive positioning of multiple layered svgs.
I need the trigger to be focus and not click because I need the popover to be dismissed when the user either clicks on the x in the title or anywhere in the browser window.
Things I have tried:
wrapping the svg in a div.
changing the container.
Add a tabindex attribute to the rect e.g. tabindex="0"
The new mini-site for iPhone 5s has a special page scroll:
http://www.apple.com/iphone-5s/
Every time you flick the page, it glides and stops at the next full page, not halfway, and not any more than required. How do they do it?
I had to do a similar site and I created a plugin for it:
http://alvarotrigo.com/blog/fullpage-jquery-plugin-for-fullscreen-scrolling-websites/
Living demo
In mine you can also:
Use it over IE 8 and old browsers with no CSS 3 support.
Slide throw the page using the keyboard arrows.
Add horizontal sliders.
Resize of texts when resizing the window.
Mobile and Tablet detection enabling the scrolling on them. (as there are usually problems to visualize big contents and texts)
It is in its first version, simple but working well :)
I will keep improving it as far as I can. Suggestions will be more than welcome.
OnePageScroll may be what you're looking for: http://www.onextrapixel.com/2013/09/18/onepagescroll-js-creating-an-apples-iphone-5s-website/
I've been fiddling with a solution to a similar problem.
All my solution does is monitor when the window scrolls.
if ($(window).scrollTop()+$(window).height()>=$("#page"+(nextpage)).offset().top+100) {
If it scrolls past the end of the "page" by more than 50px jquery animates the scroll to the next "page".
$('html, body').animate({ scrollTop: pageheight }, 500, function() { currentpage = nextpage; animatingdown = false; document.location.hash = currentpage;});
It does the same for scrolling up. This covers scrolling by mouse, keyboard or javascript.
Check out the full code at http://jsfiddle.net/dLCwC/1/
Maybe it'll be of some use to someone (let me know if it is, or isn't).
Here is a facetious cat site..
http://jsfiddle.net/Spunkgraffiti/ruxLs/embedded/result/
Go ahead and click on some blank space, stay clicked (mousedown), and drag your mouse down to the bottom of the window, it scroll's down! Every time!
The issue is that no matter what I do I can't disable scrolling when you click and drag to the bottom of the screen..
I have disabled the scroll wheels, tried to disable highlighting (cause I thought perhaps it was not "scrolling" per se but actually highlighting more and more content moving the page down), and tried a css disable of scrolling. Nothing works..
Overflow hidden doesn't help here either :/
How do I stop the scroll caused by clicking and dragging your mouse down to the bottom of the window (already fully expanded window).
I'm trying to write up a drag and drop bar at the bottom of the screen, but every time I drag a picture and try to drop it, the whole page moves.. I just want the whole page not to move when I begin to drag a picture..
Thank you everyone who takes the time to read this!
$(function() {
$(document).scroll(function() {
$(document).scrollTop(0);
});
});
See http://jsfiddle.net/ffy2x/5/
It is rock solid (doesn't scroll at all) on recent (as of this post's date) versions of Firefox, Chrome and WebKit in Qt. Internet Explorer scrolls a bit then bounces back. If it's for an embedded application using one of the first three, then this isn't a problem.
I am using TextArea tags in my web project, that shall never show scrollbars.
This can easily be accomplished using
TEXTAREA { overflow: hidden }
All browsers that I need (IE, FF, Chrome) hide the scrollbars, as intended.
However Internet Explorer and Chrome will scroll to the current cursor position anyway, while Firefox does not scroll anymore at all. You can move the cursor into the invisible area and type, but you will not see, what you are doing.
Can this be solved?
Regards,
Steffen
EDIT: Because I have not found the source of the problem and I would really like to solve this, I leave this question open. However I found a really bad workaround: We now use overflow: scroll on that TEXTAREA, put it into a DIV, measure the width and height of the horizonal and vertical scrollbars, increase the size of the TEXTAREA by that values and set overflow:hidden to the DIV effectivly clipping away the scrollbars. They get invisible to the user but Firefox still scrolls. Not nice but working.
As far as I can tell, Firefox is behaving as I'd expect given the semantics behind overflow:hidden.
That said, and having read your comments above, you can quite easily mimick the behaviour you want with a small bit of jQuery.
Here's the code I've written:
$('textarea').bind("focus keyup", function(){
var $current = $(this);
$current.scrollTop(
$current[0].scrollHeight - $current.height()
);
});
This will basically scroll the textarea to the bottom when you focus on it and as you type. It may need tweaking to account for edits being done further up in the content.
Here's a Working Demo
This only happens in firefox with a touch gesture device like the magic mouse or a macbook/macbook pro, but on some websites (some I've done and some I haven't) you can scroll horizontally even though there is no horizontal scrollbar, and there shouldn't be a scroll bar, so it's scrolling to stuff not supposed to be on the page.
http://starryeyedmusic.com/events - scroll to the right (that sidebar is positioned off the viewable page so as to not be seen)
I've also had this happen on some other websites, they work fine with normal mice or on chrome or opera with a trackpad or magic mouse.
-Danny
I did that using middle click and drag to see the example. On my laptop, I just use my horizontal scroll bar.
I expect that this is happening because the page is rendering larger than the space available. However, the CSS involved is specifically disallowing scroll bars, though scrolling still works.
I'm not precisely sure if I call that a bug or a feature.. I've found it nice to be able to scroll sideways on random things that are too large (overfilled iframes without scrollbars, for example).
Also, what is your 'question'?