Develop Reference

How page will auto scroll to clicked list item?

I am having 100 list which can be open one at a time, and each list contains dynamic length of data. If I click on list 1 it expands and all the list go down and when I click on close list 1 it return to it's own state and rest of the list come up. The problem occurs when I open list1 and then scroll down to list2 and try to open it. In this case list - 1 will auto close and list2 open but page position varies if list1 is having high height and list2 is low height. I was trying to scroll on to clicked item by using this code
window.scrollTo(e.screenX,e.screenY);
here is a link demo what i try to achieve Link
https://jsfiddle.net/69z2wepo/280996/
but it's not working well for last element as x and y contain view port distances. if anyone know how to solve this please help, any useful suggestion is appreciated.

Vertical ticket feed with Ajax and jquery

I am trying to implement a vertical ticker feed of 20 news say. Here I want to have this with below points :
1.) The ticker should display first 5 news at a time. When a user scroll down in the ticket box, he/she can view the others news down to 20th one.
2.) when a user hovers on any news div section, it should display a box in the left side of the news text. Just like as in the case of Facebook ticker. Here what's important is, The box should be displayed well relative to the position of the news div section. If the current position of the news div section is at the bottom of the page then the hover box should be appear at the bottom only. Similarly if the news div position is at the middle of the page, then it should display the hover box at the middle. In a nutshell the hover box should be dynamically adjust its position based on the position of the new div section.
I am facing challenges while developing this so decided to take help from you guys. The main challenge is, while trying to make the ticker box scrollable of fixed height to contain only 5 elements, it is hiding the hover box as well.

The easiest way to achieve the moving context div would be to render it for every item and show it when the user hovers over the ticker item.
Each item would look like <div class="a">NEWS 1 <div class="a1">TO THE LEFT (news)</div></div>
Then you simply set .a1 to display:none on load and add
.a:hover .a1 {
display:block;
}
in your css.
To solve your overflow problem when setting overflow-y to scroll, you can set a margin-left to your list which will expand the overflow-x bounds (and allow your hover over content to display)
Example here
to get what you're really wanting, you're gonna have to use javascript. You'll need to listen to the onmouseover event for all your ticker items and set the Y position of the content div to match. example here: codepen you'll need to sort updating the content of the div and correct left/right position based on where you want it to show

Scroll divs over each other on pagescroll

I have a HTML-page with several DIVs and a function named 'fullscreenCSS' wich takes care of the DIVs being fullscreen.
When I scroll using the scrollbar, I want the current DIV to stay at its position (if scrolled to the end of that DIV) and the next one slides over it. I think the current DIV temporarily got to have a position 'absolute' or 'fixed' untill the next one has reached the top of the screen. Does anybody have an idea how to do this?
A first attempt can be seen on: http://www.84media.nl/project/couch/

How's this look?
http://jsfiddle.net/Tgm6Y/2227/

Scrollbar won't scroll when selected element is out of visibility

We have a number of list items in an unordered list of which we can see five at a time. The currently selected list item has its own class ("selected") and when we click up or down, the next list item gets the "selected" class, while the previous one loses it. How do we make it so that when the list item with the "selected" class comes out of the ul's viewable region, the scroll bar will also scroll with the "selected" item?
It scrolls fine with the mouse, but when the up/down buttons are clicked, the selected class changes but it doesn't scroll. In the CSS, the ul is styled with overflow:auto. I've tried changing the overflow but it doesn't have an effect on the result.
EDIT the problem can be seen here: http://jsfiddle.net/E7MSN/63/
click enter on the textbox, and a dropdown list will appear. Then using the keyboard up/down arrows, keep going until you reach out of bounds. Notice the scroll does not follow the "selected" element.

Use scrollTop to move up and down the ul scroll position.
So in your case:
$(".services ul").scrollTop($('li').index($(".selected")) * $('.services li').height());
In the above code, the $('li').index($(".selected")) gets the number of the currently selected li element. Then this number is multiplied by the height of each li.
Updated jsFiddle
You may need to clean it up to your liking.

Did you tried style="overflow:scroll"?

jquery localscroll question about vertical and horizontal scrolling

I have created the following page http://kylehouston.com/testing/localscroll/ where I have a number of main links and then sublinks for these. At the moment when a main link is clicked the content scrolls vertically and when a sublink is clicked eg Blue Inner Link 1 the content slides horizontally.
My question is how can I update the script so that when I click a main link the content scrolls horizontally and when I click a sublink the content scrolls vertically?
Thanks
Kyle

Based on the documentation I think you need to setup selectors that target the parents and children separately. Then set the axis property.
$('parent selector').localScroll({
axis:'yx'
});
$('child selector').localScroll({
axis:'xy'
});
Right now your code uses the same selector and default axis for everything
$.localScroll.defaults.axis = 'xy';