I have an HTML div with CSS set to overflow but I am unable to set the scroll increment.
I implemented the example in this question and this JSFiddle.
However, I noticed that the scrollbar (even in the JSFiddle) barely increments when you click on the empty space on the scrollbar. This does not seem like normal behavior - normally the scroll increment is much larger.
I looked into .scrollLeft():
$('.wmd-view-topscroll').animate({scrollLeft: '+=30'}, 0);
However, I haven't seen any change in the scroll increment. How do you increase the size of the step here?
I knew where the bug was coming from as soon as i saw your code, however it might take me some time to figure out a way to explain the logic causing the bug to myself or to you.
For now, here is the solution to increasing the step of the scroll based on the JSFiddle example you provided: (However make sure you are not running an ancient version of JQuery, otherwise this solution won't work, tested on version 1.9.1 and everything works)
$(function(){
$(".wmd-view-topscroll").on("scroll",function(){
clearTimeout($.data(this, 'scrollTimer'));
$.data(this, 'scrollTimer', setTimeout(function() {
$(".wmd-view").scrollLeft($(".wmd-view-topscroll").scrollLeft());
}, 50));
});
$(".wmd-view").on("scroll", function(){
$(".wmd-view-topscroll").scrollLeft($(".wmd-view").scrollLeft());
});
});
What the part i added does, is it waits for the scrolls to finish before it sets the new scroll on the other element, i just felt like setting the timeout to 50, set it to anything you like as long as it is long enough for the scrollbar to reach the point where you clicked.
Edit 1: thanks to #Schlumpf for clearing up my doubts, you have 2 events and the other is called whenever you call one of them, and that other one in turn calls back the one that called it and sets its new scroll to be the current scroll of itself (the second element's scroll) therefore overwriting the original scroll you wanted.
As #Schlumpf pointed out, just try to make a console.log([whatever]) whenever you call one of the scroll events to see what we are talking about.
Please ask in the comments if you need me to elaborate more.
Edit 2: As Rob explained in the comments, this is not an easy question to answer because the problem is not clear enough. So try to be explain your problem in more detail next time OP. And just in case the fiddle we are talking about is deleted by its original owner or whatever, here is a link to the fiddle we are talking about, just in case.
Due to the fact that you are looking on both sidebars they will obstruct themselves. If you delete one scroll event, the click behaviour on the white space is normally.
If you add a console.log you can see a bad issue on the code:
$(".wmd-view-topscroll").scroll(function(){
console.log("test");
$(".wmd-view")
.scrollLeft($(".wmd-view-topscroll").scrollLeft());
});
You will see that the scroll event is fired multiple times with only one mouse click. That's the problem of the bad behaviour. The two scroll events obstruct themeselves, when you press into the white space.
I think you would need something like onScrollFinished in order to fix this issue.
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
We have a page which works perfectly on all of the modern browsers EXCEPT for a couple of strange behaviors on Microsoft Edge only. Here is the URL:
http://www.oru.edu/online/
Scroll down to the section below "Earn a Fully Accredited Online Degree..." and click one of the photos or one of the degree names. Expected behavior is for a "details" section to slide down and the window to scroll down to it using jQuery's "slideDown" followed by "animate". The animations work well in all tested browsers.
The details section that comes down should contain a description of the degree on the left, and four rectangular clickable areas on the right: "Program Description", "Benefits of Degree", "Occupational Outlook", and "Degree Plan". Also, the background of the details areas should contain a blurred-out version of the picture you may have clicked to open it up.
All of the jQuery animations (slideDown, slideUp, animate, etc.) work in MS Edge, but when the details area slides down, sometimes (randomly, it seems) one or more of the four clickable rectangles does not appear until you hover the mouse over it.
Also at unpredictable intervals, the background image will only show behind part of the div, with the rest of it being a solid blue color.
I've tried changing the order of the jQuery events, I've researched possible changes to the CSS, I've tried it on two completely separate Windows 10 machines, and I can't seem to find anything that causes this to change in the least.
Thanks for any solutions or ideas!
I may have a solution regarding the scrolling issue in jQuery. No promises, but I did have a similar problem as yours once with an auto scrolling issue working in every browser except one. The fix was so tiny that I couldn't believe that one thing was causing such a big problem.
Without seeing your jquery code, I don't know if this the actual solution, but here goes...
Do you have a section of code in the animation portion of your jquery that looks anything like this?
$("html body").animate({
scrollTop: $("#" + sectionID).offset().top
}
Of course, your code may not start with that "html body" or have "scrollTop" as the exact terms, but here is the point.
There needs to be a comma in between where the "html body" section of code is. In other words, like this...
$("html, body").animate({
scrollTop: $("#" + sectionID).offset().top
}
As I said, your code may be pointing to different divs or elements of your website than my code example is showing, but the concept holds true.
That little comma may be what's keeping your animation from working in Edge. That is what happened to me. In a site I was building I initially didn't have the comma and it worked in EVERY browser I could throw at it, except for Edge. I spent a week on the issue!!!! Finally, I stumbled upon a forum that mentioned the comma and BAM it worked!
Give it a try and please report your results. Good luck!
So I have this issue with something like old deprecated <marquee>. Here's fiddle: https://jsfiddle.net/qbqz0kay/1/
It's one (and simpliest) of hundreds of attempts. I can't resolve main issues:
how to remove the gap between end and (new) beginning of the list (it should be like one infinitely scrolling sentence). I've tried with removing first li elements and adding them to the end but it affected overall dimensions of the list and in consequence - the animation was disrupted.
part of the list will be changing once in a while (site is connected to websocket) and every change in its content affect dimensions of the list also. So again - problem with stuttering animation occured.
Any ideas how to handle this? I've seen many ready-made examples but none of them handles those two issues.
Marquee can't help you in this case, as you can't achieve continuous scrolling using this element. Instead, just a bit of javascript might do the trick here. I tried this example which is also very well documented on my own blog and worked perfectly fine, more on this article:
http://www.dynamicdrive.com/dynamicindex2/crawler/index.htm
I'm building a single-page website with a few sections that each fill out the user's window; I've got that working.
What I want to do is:
When the user scrolls up or down he/she would ease-up or down (accordingly) to the section before or after. My sections each have a anchor at the top of them.
Here is an example of what I'm trying to achieve. Each article fills the page. Once you scroll you jump to the next article.
http://www.made-my-day.com/
I think you could get the job done using this plugin: https://github.com/alvarotrigo/fullPage.js.
Also, it seems to be actively updated. The last commit to the repo was made 3 days ago.
Cheers!
You should take a look at scrollorama and superscrollorama.
They are lots of cool effects that you can use for scrolling, including the one just like the site you provided.
--UPDATE--
After some talking with OP, I realized that both libraries don't do what he wants.
So, my new suggestion is reveal-js, a js presentation library.
You don't really want to do this on an onscroll. Consider that onscroll isn't really anything except an event which says "the view of the page is moving".
That doesn't mean that they're using the mousewheel to do it.
On a phone, your plan can make sense: then it would be like making a drag movement equal to a swipe movement. Great.
My preferred method for scrolling is to click the middle-mouse button, and then position the mouse just below the anchor point, so that I can read each block of text as it scrolls past the screen.
I don't even need a hand on the mouse, for long blocks.
So in my case, onscroll will fire at something like 60 events/sec, and if you auto-jump the articles, I'm going to be teleporting through your entire site's content.
Other people still drag the actual scrollbar.
Listening to the mousewheel and keys (up/down, pg-up/pg-down), rather than just any method of moving the page, is safer... ...but are you sure all articles are going to be small enough so that all content fits in all browser windows, even at stupid-small resolutions (iPhone 3)?
Because if people need to scroll to read content, then all of a sudden you're dealing with a much, much more complex solution:
You would be required to listen to regular (or customized) scroll requests of any kind, to get to the bottom of the current content... ...and then you'd have to provide some sort of visual queue to the user that they are now at the very bottom of the content, and continuing to use a trigger method (swipe/drag/keys/mwheel) would switch articles.
The first two are fine... ...make it feel spring-loaded, like smartphones do.
...what about the other two, where people might expect to hit them multiple times in a second, to get where they're going?
I've got a problem which you can look at here http://jsfiddle.net/dng2P/4/
If you click the detail button it shows you information and then if you click the "Points Statement" button it slides a layer down.
My problem is that I'm trying to make the main booking details div the same height as the points div if it's bigger and then when you click close put the main booking details height back to what it was originally.
It's half working as the main booking details div becomes the same height as the points div but just doesn't go back to what it was originally
Can anyone help?
Thanks
Jamie
How's this?
http://jsfiddle.net/dng2P/8/
All you did wrong was failing to keep the original height around properly. You only declared bookingdetailheight as a local variable which means it got re-declared for every toggle, and removed after every toggle was complete. I tied the original height to the DOM element with using .data(), it simplifies things when you might have people opening two of those toggles simultaneously.
I got on a roll though, so tidied up a bit and made the outer animate along with the inner. Oh and please look up the proper traversal methods in jQuery, parent().parent().parent().find() is asking for trouble. I think there's some left in parts I didn't look at.
I had a quick look at the jsfiddle code. I think the value that you take into the bookingdetailHeight should be declared outside the scope of the .points toggle function. that may help a little. just gonna try that :)
[edit] - didn't solve it -sorry :(