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.
Related
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.
I am facing some issues with the jQuery Chosen plugin. Here are some screenshots:
The focused Users input is a jQuery Chosen select input within a tab in a Bootstrap dialog (but this doesn't matter anyway). As you can see the scroll of the Chosen's ul.chosen-results didn't reach the bottom here.
Now if I scroll down the results:
I reach the bottom of ul.chosen-results, but if scroll with the mouse wheel down further from this point on, the rightmost scroll doesn't scroll down.
But I would like the other scroll to go down too from that point on while scrolling down ul.chosen-results with the bottom scroll of ul.chosen-results reached, to achieve this:
See that the rightmost scrollbar is down here too. This is what I want to reach while scrolling on ul.chosen-results. Does Chosen somehow inhibit the scroll event propagation when scrolling ul.chosen-results?
Can I achieve what I want? How?
Thanks for the attention!
In the not minified js plugin file
find following code
high_top = this.result_highlight.position().top + this.search_results.scrollTop();
and replace it by this.
high_top = this.result_highlight.position().top;
This issues has been addressed here another possible fix is to update to jQuery 2.2.1
Here is what I am trying to do.
As you can see the transition is a bit shaky. How would you recreate this with a smooth transition/animation?
I am using a plugin (Fullpage.js) which disables traditional scrolling so anything using "offset" to change the element position to fixed would not work.
On a webpage can I hijack the vertical scrolling action and make it horizontal?
Please try and ignore the potential usability issues.
On a webpage can I hijack the vertical scrolling action and make it horizontal?
Not as far as I know (except maybe by rotating the element - but that is probably not what you want).
You would have to re-arrange the contents to make the vertical scroll bar go away, and force a horizontal one instead.
Whether that is possible will strongly depend on the nature of the HTML elements inside the page.
Here's a jQuery Plugin that does this, and you can specify it to only work when the mouse is over the target element:
http://flowplayer.org/tools/scrollable/index.html
Yes you can do this.
Vertical scrolling is set to element.scrollTop
You could simply add a loop that catches scrollTop when it changes, sets it back to zero and then sets the scrollLeft to be = to the changed position.
More so, an even better solution is to overwrite the onscroll event.
window.onscroll = function(event){
event.preventDefault() // Stops the page from scrolling vertically.
window.scrollLeft = event.scrollTop // This is not the correct event attribute, youll have to locate it yourself.
}
You could hook into the scroll event, check which plane is being scrolled, if it was the vertical then set the difference as the horizontal scroll and set the vertical scroll to it's previous value. Though I can imagine that would be incredibly expensive.
Does a div element not have an onscroll event handler?
The behaviour on my page doesn't seem to indicate the div onscroll event handler is recognized.
<div id='bd' onscroll='alert("Scroll Called");'></div>
Also,
Do div scroll events roll up to window scroll events, as per DOM event bubbling ?
Depending on which version of HTML you're using, you could use the onwheel event, instead.
The onscroll event works only if all the following are true:
The div has overflow: auto, overflow: scroll, overflow-y: scroll, etc.
The div currently has a visible scrollbar that can scroll.
The mouse movement actually causes the scrollbar to scroll.
So the onscroll event is not really suited for detecting general mouse wheel movement.
Please note that the onwheel event is new in HTML 5. According to w3schools, it is pretty widely supported, though.
I scratched my head on this one too, until I started learning more about DOCTYPE directives. The onscroll attribute is not supported in most recent version of the HTML spec. It'll show as invalid syntax in Visual Studio. It might work in many browsers, but it's still invalid code.
Instead, you canan event using Javascript or jQuery. I use an approach like this to synchronize scrolling on two separate div's:
$("#gridTableContainer").scroll(function() {
HandlingScrollingStuff();
});
Yes but the element needs to have a scrollbar. You can give it one with either overflow: auto (which gives you a scrollbar when the content is tall enough) or overflow: scroll. (These can be set specifically for x & y as well overflow-y: scroll...)
Although they don't bubble once the div has been scrolled to the bottom the window will start scrolling. (Basically if the div can scroll it will intercept the scroll event, but if it can't then it will go to the page)
I know it may not be exactly what you're looking for, but a lot of javascript frameworks can help you with this. It is not necessary for the div to have a scrollbar for you to hook to the scroll events.
Eg. Mootools has the mousewheel event. Demo here. (It has scrollbars, but you can use Firebug to remove the scrollbars and try -- it still works).
I have used this myself on a site I made a while back. If you scroll while holding your mouse over the images it prevents the default page scrolling and instead slides the image-bar.
JQUERY scroll() can help you.
$("#gridTableContainer").scroll(function() {
HandlingScrollingStuff();
});