I'm trying to scroll using window.scrollTo(0, document.body.scrollHeight) in order to scroll to the bottom of the page in my email. I tried to implement this in both Outlook and Gmail, however, I receive the output of undefined and nothing happens.
The function works on other sites, so I'm guessing the issue could be that Outlook has two scrollable windows on the page I'm trying to scroll. How can I make it work and scroll the page on Gmail/Outlook?
It's normal. Gmail is not scrollable.
Have a look to the css properties, the main divs are in a fixed position.
Instead of doing a window.scrollTo, try to get the div which is scrollable in Gmail, and apply the scrollTo function on it instead of the window element :)
Related
I know this question sounds confusing, so here's a better explanation:
I'm using a mobile. Say there's a scrollable element somewhere in the body. When I scroll the element and it reaches the bottom, I want instead of getting stuck for keep scrolling the element, it scrolls the page instead. That's also true if I reach the top of the element, it scrolls up the page, not getting stuck.
I tested it on two different mobile phones with the latest version of Chrome. The First one does exactly that. Weirdly enough, the second one only works when it gets to the top but not to the bottom. Is there any way to make it always work irrespective of the environment (mobile phone or browser) we are using?
Edit: What I'm trying to achieve with this
Desktop:
I want a way so that the buttons placed at the bottom of the content are not so distanced from the user's view. If we remove the scrollbar, then the users have to scroll all the way to the end of the content to be able to click the buttons.
The problem with this method is that, on mobile, in some browsers, it blocks the user from scrolling the page, even after reaching the end of the element. So they have to touch the edges of the screen to be able to scroll the page instead of the element.
What I want is, for users having difficulty touching the edges, they can still scroll the element. And when it reaches the bottom of the element, it scrolls the page.
I know this is weird. I know some of the better tricks like using the Read More-Read Less button, but it requires JavaScript I guess? I'm in a situation that's really hard to use JavaScript at the moment (shortly because of how bad the code is organized), and looking for a way if there's a simple trick using pure CSS. Any help or idea is appreciated!
Hay,
I'm using jquery.fullpage.min.js plugin in my site for fullpage and scrolloverflow.min.js for scroll inside divs. I set autoScrolling:false, scrollOverflow:true because i I don't want auto scrolling, and I want overflow scroll inside div.
The problem is that when I scroll the overflowed div, the whole page scrolled too.
I tried use normalScrollElements:"my-div", but it works only when autoScrolling:true.
how can I avoid page scroll when user scroll the overflowed div?
Thank for help!
Few things:
autoScrolling:false, scrollOverflow:true are not compatible options. You can probably see an error message saying exactly this in your JS console. So expect problems in different browsers :)
normalScrollElements won't have any effect when using autoScrolling:false.
normalScrollElements won't have any effect inside scrollOverflow
I have a requirement on may that, i need to work the scroll bar which in tag on my page. See attached.
To access main scroll bar, i can execute java script code - window.scrollBy(), but how do i access the inner scroll bar which is DIV tag.
Note : Inner scroll bar is not in frame, also not in separate window on the page.
See attached.
Are you trying to test the scrolling mechanism or access an object off screen by scrolling to it?
To access an object by scrolling you can use the "locationOnceScrolledIntoView" method on the element
If you are trying to test the scrolling mechanism, then unless the scrolling is a bespoke implementation, I would advise against it. You would simply be proving a browser can scroll, which has been tested many times before!
I am currently designing a webpage that is extremely vertical, my idea was that users would not scroll around the page, but only when they clicked on links with internal anchors (href="#someDiv"), the page would automatically scroll down to that section.
So that the elements of the page are organized into bundles, and the user clicks to go up or down to one section of the single page or another.
I've uploaded the page to the following url:
DWS - Prototype
The page is fairly straightforward, and I am using a smooth-scroll jQuery plugin for the automatic scrolling. All I want is for the user to not be able to wander about on his/her own.
I have tried using overflow:hidden, and looked for javascript or jQuery to get this done, but can't seem to find a viable solution. Overflow hidden prevents the page from loading past the screen, so you can't link to the other elements of the page.
I haven't really tested the HTML/CSS beyond Mac OS, but it works fine on Safari, Firefox and Chrome.
You can disable the scroll bar on a page using the following css property
body{overflow: hidden;}
This will disable both the scroll bar and the mousewheel (im not sure about Pg Up and Down Buttons)
While you definitely have an interesting concept I think it will be very hard to pull off the way you're wanting. What happens if I have the height of my browser window set so small that I can't see your Navigation menus and I also can't scroll? Chances are I'm just gonna get fed up with your site and leave.
When users see a vertical scrollbar they expect to be able to scroll up and down. Taking that way from users is more likely to frustrate and anger them as opposed to them thinking 'This is really cool'.
That being said you could load up jQuery and do something like this:
$(document).ready(function() {
$('html, body').scroll(function(e) {
e.preventDefault();
});
});
This should prevent the scrollbar from going up or down. disclaimer: I have not tested this.
I suggest you make the sections (partially) collapsible. E.g. like here.
I was looking at an issue in JIRA (e.g. here, an issue in JIRA 4) and I noticed JIRA 4 has some interesting scrolling behaviour, where when scrolling down with the main browser scrollbar,the jira header scrolls up out of way, then the issue title stays fixed at top, then the rest of the issue continues to scroll. So the issue title is always visible.
There isn't an extra vertical scrollbar. Its all scrolled via the main browser scrollbar. So its either css or javascript magic! Any idea how they do that?
Cheers,
Phil.
It changes dynamically the div #stalker which has position:absolute;top:76px;. When the user scroll, change the position to position:fixed;top:0 and keep it in a fixed place, giving you the ability to scroll the rest content.
Edit
I created an example of this behavoir, because I was curious and here the demo if you want to check it http://jsbin.com/igiji5/3
Atlassian published the source of the Javascript at http://docs.atlassian.com/aui/3.0/jquery.stalker.js.html
That is created using JavaScript.
I can see by using FireBug to inspect the div#stalker that it changes class and style attributes when you are scrolling.