Hello I am trying to make a div scrollable with mouse wheel but its only working with the scroll bar right now the page is http://154.16.127.140/agar/indexBETA.html Please help me ! Ps its the Server Selection div with all the servers and the blue scroll bar.
Here there is an easy example: DIV with wheel scrollable content
If you can't apply let me know I will try to add it in your page.
I try my own suggestion on your page and does not work. Probably as you have many JS some doesn't work together. I try with a page without other JS and it works.
Related
So, the question is pretty basic but I couldn't find an example snippet to start with.
Idea is to have multiple div with full-screen height and upon scroll, the whole of the div scrolls making the user think that they are on same position and content is coming on same position. [ kinda-ish]
I have an example website where such scrolling behaviour is done. here
Just a reference will help me start.
Thanks
I want to scroll over the page, but currently my website doesn't have a scroll bar and I already tried "overflow: scroll;" which is not included by original code but doesn't fixed anyway. I'm unable to get the rest of the page to scroll as it should. What is the other solution or how can I add scroll option on my webpage?
Any help is most welcome and much appreciated.
http://collabedit.com/xdyw2
You need to change position fixed in your class of static to something else.
I’m working on this website for a client: http://alsite2.stackinjb.com.au/. They want to add ‘skins’ or 'wings' to some pages, as you can see here: https://www.jbhifi.com.au/
If you look at the JB Hi Fi website, you’ll notice that when you scroll down, the top of the ad fixes to the top of the screen. On my site, I can’t seem to make this work.
Any help on how to make this work would be much appreciated.
Cheers
You need some javascript for this. Every time the page is scrolling, you have to check the scroll position against the position of the sticky element. If the scroll position bigger than the position of the sticky element, make it sticky.
Check out Waypoints, this is a nice library for such things.
I'm having a little trouble here: ..
Everything seems to work fine (had a small problem with the divs moving around when I resized the window but managed to fix it with a little help from the users of StackOverflow) but I have run into another problem now.
I'm using wordpress for this website with some modifications to a basic theme that I've made. Everything works fine except when you make the window quite small, the horizontal scrollbar appears but when you scroll the horizontal scroll bar you'll notice that the menu overlaps with the content.
How can I make it so that they don't overlap? I tried to make the position of the sidebar absolute instead of fixed, but the menu is supposed to stay there when I scroll vertically.
Not sure how I should go about this... any help would be appreciated!
Thanks!
As I said in my comment, you will need javascript to prevent the content div from overlapping the fixed menu
To point you in the right direction check out this
plugin on github .. its a great plugin using jQuery to accomplish pretty much exactly what you're after ..
Here is the working version using a small bit of jQuery, I hosted it so its easier for you to see:
The only change to the layout you need to make is to set the sidebar-primary div to left: 0; , it nudges that div very slightly to the left, but I think its worth it given that your original problem is solved with just a tiny bit of jQuery. Let me know if it works for your layout ..
Hey Guys I have implemented a scroll area but within the scroll the I have an expandable text area but the scroll area doesn't take this in to consideration so when the expandable text is clicked it is cutting of the bottom. Is there anyway to fix this? The link that its doing it on is http://www.ashleysark.com/transport
You can see on http://www.ashleysark.com/dogcare the scroll works.
Thanks
Adam
When the page was loaded the height of the content was small and when the vets link was clicked thn the height increased and now the javascript is not aware of it may be one simple fix will be once the accordion call is done try calling $("#scrollbar1").tinyscrollbar() that should fix the issue.
You have to call $("#scrollbar1").tinyscrollbar() again after the text has expanded. In fact, you have to call it every time the content of <div id="scrollbar1"> changes.