I would like the vertical scrollbar to be displayed when I call element.scrollTop = <somePosition>;
Here is an example of what I'm trying to achieve: https://plnkr.co/edit/0ls05cCa3XrvrWPO?open=lib%2Fscript.js&preview
If that example is loaded on iOS, when the left box is scrolled, the right box should sync with it. That works just fine, but I need a way for the scrollbar to also show up.
I think your issue is that division being scrolled via Javascript is not recognized as active, to keep scrollbar visible.
I would suggest to try any custom Scrollbar library, they manage scrollbars with divisions rather than browser's.
Many such would allow you to configure scrollbar to be shown and hidden using Javascript.
It would add additional work for you, but it can be a solution to go with.
Here are few you can try with: https://www.jqueryscript.net/blog/Best-Custom-Scroll-Bar-jQuery-Plugins.html
You could dynamically add a css class to the container when performing scrollTop().
Try a class that implements overflow-y: scroll when applied. That should yield the desired effect.
Related
I want to remove scroll bars from Awesomium.net web control.
In visual studio defualt web browser you can easily remove scroll bars like this.
Public Sub loadVideo(pLink As String)
WebBrowser1.ScrollBarsEnabled = False
End Sub
but i dont know how to do this on Awesomium.net web control.
If there isn't a way to do this on Awesomium.net web control, is there javascript or CSS code i can put to my webpage to achieve those two things?
Thanks.
I haven't used Awesomium, but it's probably best to remove the scrollbars in CSS. Even if the whole outer web control/page has no scrollbars, the page can have an element in it that takes up all or almost all of the view area and does have scrollbars.
It depends if you want to just hide the graphical scrollbar or disable scrolling. The usual way to stop an element scrolling is to use the CSS overflow property, like so:
/* Disable scrolling on body */
body {
overflow:hidden;
}
/* Optionally, disable scrolling on everything (not recommended because it's too strong) */
* {
overflow:hidden;
}
There's more information searching "css remove scrollbars" or in this previous answer.
A quick google search for "Remove Awesomium.net Scroll Bars" yeiled the following result:
How To Hide Scroll Bars In A WPF Webcontrol
Another few searches, and I found a solution for your second problem:
How To Inject Javascript On Document Ready Of Any Page
Scroll automatically to the bottom of the page
I have two divs with the total height of the viewport and a button for scrolling from one to another with ScrollTo jquery plugin. The problem is that I want to prevent the posibility of manual scroll.
I want that when someone scrolls with mouse down, the browser scroll automatically to the second view, and when I scroll to top gets the previous view.
I don't know if I'm explaining well, here an example: http://orangina.eu/heritage
Try to scroll in this webpage, this is what I need.
Thanks!
Correct me if I'm wrong but it looks to me like you're trying to disable the browsers default scrolling behaviour, attach events to scroll up and scroll down and scroll up or down to the height of the page's height.
The way I would do this is disable the browser's default scrolling behaviour with overflow:hidden to the body and html.
Then you can bind the jQuery "mousewheel" and "DOMMouseScroll" to the div checking for "event.originalEvent.detail > 0" or "e.originalEvent.wheelDelta < 0" for down scrolling or else for scrolling up.
Finally add your function call inside the if or else depending on the downscroll or upscroll.
I can write the code if you want but it might help you more if you try this yourself.
You can achieve that same effect by using fullPage.js plugin for jQuery.
Compatible with old browsers such as IE 8.
Touch devices compatible
CSS3 animations improving performance
Lots of options, callbacks and methods.
Thanks for all replies!
I solved my problem, instead of using standard scrolling I used the translateY css property. Setting a data-id to each page layer and doing translateY(100%, 200%, 300%...) every time I want to scroll down/up.
I'm looking for a way to do an effect which is most likely a combination of things, the base of it would be something like this:
http://nikestadiums.com/
As you can see, when you scroll down, a div is actually sliding up. I am not sure there is such a plugin, and if there is, is it possible to resize and maybe re-position elements as you scroll down?
I've seen the post:
How to make div scroll down with a page once it reaches top of page?
and I know of sticky elements http://imakewebthings.github.com/jquery-waypoints/sticky-elements/
Is it even possible to do something like this? If yes, can you give me links/examples please?
And of course I need to make it super super smooth like the Nike one...ha
Here is a jsfiddle, but I can't get it to work right.
http://jsfiddle.net/3U2Gj/65/
Thanks.
I've modified your JSFiddle. I tested it in Chrome, Firefox, and IE7+.
http://jsfiddle.net/t0nyh0/aMXRq/3/
I've cleaned it up a bit and moved all your "states" into classes. On scroll, it simply uses JQuery to add and remove classes based on the scroll position.
Note that there is no animation, if you wish to animate it, you can use class transitions to animate. See more here: http://docs.jquery.com/UI/Effects/ClassTransitions.
In regards to entering full mode on keydown, you can again create an "expand" class and apply it upon keydown. You can then structure your CSS as follows:
.minState3.expand { }
and to show the button again
.minState3.expand button { display:block; }
Doing it this way allows you the flexibility to define how it looks based on the different states.
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.
I'm trying to create a flyout menu that has scrolling build in if its larger than the screen. I can't seem to figure out how to do this with the native overflow-y scrolling properties. Everytime I seem to set that overflow-y:auto then the the menu that flys out is nested within the parent div with a scroll bar.
Anyone has any ideas?
Thanks!
This is not a solution of mine, but you can try this.. it has a really nice effect and serves your purpose:
http://css-tricks.com/examples/LongDropdowns//
you should set the max-height proparty for the div otherwise it cant tell (since it is sort of absolutely positioned) where to stop, or u can set the height for older browsers, or you can javascript it, change height dynamically until it reaches a maximum