I can't seem to find any reference to an event/method that would allow me to programaticaly mimic the scroll that occurs when you simply click below a dragger, on the scrollbar rail.
Is there a way to do that?
Edit:
Below please find illustration of the problem.
The highlighted area is the scrollbar rail where, by clicking, you scroll by a "pageful" amount calculated by the browser. I am after mimicking a click in these areas, something like .scrollByPageUp() / .scrollByPageDown().
The reference to a scroll plugin does not seem to provide a way to do that. Specifically, a method .scroll(int) would need a sensible integer to be passed in. Any ideas how to achieve that?
scrollTo should do what you are looking for
http://lions-mark.com/jquery/scrollTo/
Related
Edit: Using Coll's innerText method along with Icekid's scroll behavior solved this. Thanks!
I'm using set innerHTML to apply the <mark> tag in a series of divs. For example, user presses a key and the <mark> goes from:
<mark>This is a demonstration.</mark> To show what I mean.
to
<mark>This is a demonstration. To show what I mean.</mark>
This works great except when it comes to scrolling. The text being marked is variable and sometimes requires the div to scroll. I use the following JavaScript to scroll the view:
function prompt_scroll() {
document.getElementById("next").scrollIntoView({ behavior: 'smooth'})}
The issue is each time this happens, the newly set innerHTML begins scrolled to top, then scrolls to the end of the <mark> tag. That sort of jumping up then scrolling is enough to make someone seasick!
The solution I think I need is to set the innerHTML already scrolled to the same point as the JS code I shared above. I just don't know how to accomplish this or if there is a better solution to prevent that scrolling to the top. I'll add that I'm still learning the ropes with JS so I may need a little extra info on the how and why. All guidance is appreciated.
You can add
yourElememt.scrollIntoView({behavior:"smooth", inline:"center",block:"center"})
In place of the "center" you can use
//start, "end" ,or "nearest"
To fix it to the position you want
I think you should use nearest for your case
Would someone be able to help me out recoding some of the aos.js script? Long story short, I'm trying to get aos to work within an iFrame. I'm using iframeResizer.js and I'm able send the height of the viewport from the parent page to the iFrame. I'm also able to send the scroll offset. The next bit I need to figure out is how to use this data within aos.js. So far I've managed to change anything within aos.js that was previously using the height and scroll position of the window to instead use the height and scroll position of the parent page, which looks promising. Where previously all aos animations were playing as soon as the page loaded, now they sit waiting for a scroll event to trigger. The thing is though, there's some code within aos.js that I just can't get my head around in order to rewrite it to trigger the scroll off a callback from iframeResizer.js. I've been trying to get these scroll based animations running within an iFrame for what seems like an eternity so any help would be greatly appreciated.
So, from what I can see, there's a line in aos.js with 3 event listeners the last of which is a scroll event. It looks like this though with some strange parameters in brackets that I've never seen before.
window.addEventListener("scroll", (0, u.default)(function() {}
I've tried writing my own function but I just don't get what what the (0, u.default) part is or how to use it. The whole aos.js script is way above my level of JavaScript unfortunately. If any one can advise me how I could trigger that same event listener I would very much appreciate it!
Another option I've been trying is to fake the scroll event...as in, every time the scroll position changes and gets sent from the parent into my iframe could I fake a scroll event...but I haven't had any luck. Is that even possible I wonder?
I think that's enough information for now as but if anyone is willing to help and would like more please just shout.
Thanks
I am searching for a solution to get this effect:
http://www.socketstudios.com
So you scroll not only 1 or 2 px, but 1080 or even better 100%.
Does anybody know how to do this?
Your example site isn't doing what you're asking for.
In the example, they're using JavaScript to animate the images scrolling out of view so it looks like they're flying off into the far distance. View it with JavaScript disabled and you'll see there's not actually a big page to scroll through (it's rather empty in fact).
To do what you're actually asking is a Windows setting available in the Control Panel:
I'm writing an extension to Firefox and I'm using JavaScript.
Everytime my mouse uses the scroll bar, my extension goes a little bit crazy.
I'd like to know if there's any way to identify the mouse is on a scroll bar? Some kind of tag/method/special DOM property - anything!
Thanks.
Can you just check whether the mouse is hovering outside the borders of your page/container? Something like window.screen.width or similar?
Scroll bars are usually anonymous elements, they are added to HTML elements automatically but they aren't visible in the DOM. However, event.originalTarget will give you these scrollbar elements if they are the event target (see https://developer.mozilla.org/en/DOM/event.originalTarget).
We're using this autoscroller script: http://scripterlative.com/files/autodivscroll.htm (the bottom version).
However, we got really stuck since we don't know how to replace the moving "scrollbar" on the scroller side with a pure and simple line with up arrow on top and bottom arrow on bottom.
Functions wise we want this sidebar to behave exactly like the original sidebar and of course be cross browser compatible. We just want to get rid of the original scrollbar and replace it with a much cleaner and more stylish style.
Is this doable?! How?
Best regards Stefan
Just found jScrollPane on AjaxRain.
Implementing an autoscroll would take some coding, but should definitely be possible by just sending the click messages to the div manually so that it would do the scrolling. If it looks like this will suit your needs, I'd chip in with some additional implementation code. That topic may actually be better suited for another question, if you decide on jScrollPane.
Edit: updated link above. also, there are demos there for scrolling on hover and clicking on a link to jump to an anchor. Custom code for an autoscroll should be relatively simple to write from there.