http://jsfiddle.net/deswolf/D9X53/
If you play around with this menu for a little bit, you will notice that when your mouse leaves at the top, you get a lot of flickering, which is really annoying. How can I fix this?
The issue you're having happens when you go back to the menu while it's still rolling up. I updated your code to disable the mouseenter event for 500ms (enough to allow the menu to roll up) and then enable it again. This prevents you from triggering the mouseenter event (which causes it to roll down) while it's still rolling up.
Demo
Related
I try to detect a middle mouse button click on a HTML Custom Element by adding a listener for the auxclick-Event to it. As long as the page is not scrollable, this works totally fine in Chrome on a Win 10 machine.
As soon as the page is scrollable however, the event is not fired anymore and the standard bahavior of a middle click kicks in (scrolling the page by moving the mouse).
Does anyone know a way to work around this issue?
I've created a small CodePen to demonstrate the behavior.
Without scrolling it just works fine, but if you uncomment line 2 in the CSS pane (min-height: 200vh;) the middle click triggers the scrolling behaviour.
Kudos to iѕєρєня for pointing me into the right direction.
If I listen to the mousedown-Event too, check if it has been fired from a middle click and then prevent the default behaviour, everything seems to work fine.
Checkout the updated CodePen for the full solution.
I still think that this is kind of a hack. If somebody knows why Chrome does behave like this, I would be glad, if you'd share it here. ;)
I currently have a really great vanilla JS script in place that smooths out the page scroll when the user is scrolling with the mousewheel. (Original script grabbed from here https://stackoverflow.com/a/47206289/9817996)
After adding a scroll to top link using
Scroll to top for simplicity, I have come across an issue where when this link is clicked, the page scrolls to the top then bounces right back to where it was.
Here is a Codepen showcasing the issue: https://codepen.io/kiaramelissa/pen/zYrYbbj
I have also tried creating a scroll to top button using Javascript but it does the exact same thing. I was wondering if anyone could assist with figuring out what is causing this?
I would ideally like to keep my smooth scroll as vanilla JS and not utilise any bulky plugins. Thanks in advance for any ideas!
This code works only when scrolling with the mouse wheel. But there is a problem with it.
update() function is constantly being called when scrolling down (up works ok). This is because moving is always true (delta always > 0.5).
if (Math.abs(delta) > 0.5)
If you put a console.log there you will see it for yourself.
I can't actually understand why the 0.5 is selected as a value, but if you make it 1 it will work for both scroll up and scroll down.
To further see my point, if you leave it as it is (0.5), and try to just scroll a little bit up after you scroll all the way down, you will see that the button works without bouncing back down.
After you make it 1, smooth scroll continues to work for both directions, and when the button is pressed, it stays up.
BUT the scroll to top (with the button) is not smooth! That is expected because your js code only works for mousewheel event, not with the # you used.
Let me just say that if your intention is to have smooth scroll when you press the button, and don't care about the mousewheel, then you will be better off with something like this:
css scroll-behavior or like this javascript scroll anchor without the need of your existing code.
If you want to keep the smooth scrolling when mousewheel is used, then you should use the javascript method from the above link, along side your existing code.
Also one more thing: If you press the button, before the scroll finishes (while easing out) it will jump to top and then it will bounce back where it was. That's expected, as js scroll code doesn't know anything about the button scroll behavior.
Here is my scenario I have a web page which will navigate through using mousewheel and scrollbar. I have fixed the mousewheel problem.... But the problem where I use the scrollbar it will navigate to the end or go to the first it depending on the scrollbar you pressed up or down.
I know the error is $(window).scroll(function) here due I navigate from Div 1 to Div 2 which will fire the event a lot of times when the scroll bar moving.
Here is my fiddle
The problem is where i when i scroll using the bar beside down or up. It will trigger until the end of my onscroll event.
Is it possible when i press the scrollbar once only trigger once ?
An alternative way i know is hide the scrollbar and design a fixed position button up and down will resolve this problem but is it possible to do this with default scrollbar/overflow ?
Tried your fiddle. When using mouse wheel, it kept pending between headers 4 and 3 after I reached the 4th one. When I removed the $(window).scroll() function, it worked perfectly, both down and up.
The scrollbar, however, is quite a complicated issue - when you click/tap and drag, you simply can't "steal" the scrollbar from your pointer/finger - the user keeps dragging, yet you're trying to reposition the scrollbar/content forcibly. I don't think this is a good idea (from the UX point of view).
Not sure if it fits your requirements but in case I'd want to fully control the content, I'd completely remove the scrollbar in CSS and then use the mousewheel or swipe functions to control it.
hope your all good... Another question :/
Heres the page im working on:
http://beelinetest.site50.net/uw_virtual_tour.html#
Its not a huge problem, but if you press the tabs quickly- two will shoot up- what can i do about this? So it waits for the first tab to complete its movement?
Also, another thing while im here, notice the slight hover over movement ive added to the tabs? When hovered over they move 7px up, then back down when un-hovered. But when clicked the tab moves up and it still thinks my mouse is on hover... Its not until i move the mouse until it moves back down 7px...
Thanks in advance, Tom
Your click handler for each tab should disable the clicks on the other tabs until the "slide in" function is complete. Looking at your code, it might be easier to accomplish if you had a common selector rather than selecting each individual one by id. Perhaps you could add a class to each div you want to use as a tab, then you could operate on them as a group.
http://jsfiddle.net/nicktheandroid/7raYa/9/
My script allows me to scroll the page like a PDF, allowing you to grab the page and drag down or up. My problem, is that when i use the scrollbar, then mouseup from the scroll bar, the scrollbar will stick and scroll with my mouse up and down, even though my mouse is up. So when clicking on the scrollbar, its like i never moused up. how do I fix this?
THANKS!
I believe the scrollbar is part of the page, so when you click it, it makes your script believe the mouse is down - you'll notice that after you mouseup from clicking on the scrollbar that the page continues to move up and down until you click. Try to grab the coordinates of the mouse on mouse down, and make sure that the click occurred inside of the page (minus the scrollbar)
Edit: I was correct - here is the updated jsFiddle with it working: http://jsfiddle.net/xDtVL/