This is my html structure.
section 1 can be scrolled horizontally with li elements
and section 2 can be scrolled vertically.
Before scrolling section2, the section1's scrolling works well.
But, after scrolling section2, and make it like below,
section 1 does not move and all scrolling event goes to section2.
I can't understand why it works like that. (section1's z-index bigger than section2 so always it is on the section2)
the strange thing is it works well at chrome browser on pc.
but on my android browser(HTC evo), the section1 scrolling doesn't work when section2 scrolled to under section1.
Is there anybody explain this?
thanks for reading.
I solved this problem by adding "position: absolute;" on section2. so it can move independently.
Because section2's moving is not affected to section1, the section1's control area did not move.
:)
Related
this is my code:
Link to Codepen
How do I make the website stop scrolling down where the content actually ends?
overflow-y:hidden;
in body element, it won't work because it will not give me scroll the page at all. but I need to scroll it down where my content ends.
How can I do it or prevent it in the most simple way except using js or bootstrap?
The problem happening because every new element goes lower and lower.
Thank you for help !
It happens because many elements has position:relative. Position relative saves place where element should be rendered by default.
You need change html structure and css.
Example: codepen
I'm working on a project. There is an issue on the front end side. The site is responsive, but when I view it in mobile width (specially for iPhone 4 & 5), the vertical scroll doesn't work.
I'm not using any div that needs scrolling, the whole page is not scrolling vertically, I'm afraid I can't provide the code. The thing I wanna know is why does this happens? and what would I've possibly done wrong?
1) I have added -webkit-overflow-scrolling:touch on body tag but my chrome browser is not picking it up and saying invalid property.
2) I have added body{overflow-y:scroll,position:relative} Now its showing a scroll but there is no bar between the scroll, and its pretty much stuck there.
I think its because of position and z-index the z-index value make problem in your small screen.
Its possible that the element which have high z-index value. stopping you for scroll.
and It can be possible you have overflow:hidden in wrong place. It will be good, If you show some code of line or your site link.
I have a simple position:fixed sidebar out of the way of page elements. The page scrolls fine, but when I mouse over the fixed sidebar, the page can no longer scroll. Could someone explain why this happens? and how to fix this?
This happens because only the part you hover over scrolls. For example if you create an element with "overflow: scroll", when you over over this element, it will scroll and not the whole page. Same thing is happening over here.
Anybody's got ideas, how to get around the problem that scrolling horizontally clears div background colors/images.
There's a similar problem example for example on www.f-i.com.
If the browser window is small enough to display horizontal scolling and then you scroll to right the content gets hidden (probably the background color of the divs get replaced by body background color... or something)
This happens at least with current versions of Mac Chrome and Safari.
I'm using 960.gs if it has anything to do with that..
Thanks in advance,
Harry S
On the www.f-i.com site, if you look carefully the div.main has overflow: hidden;
If you remove this it all works fine.
I'm working to build a CSS layout that has a fixed header, lefCol and Right Col, but the height of the MainCenterColumn (#mainCol) can scroll.
Here's what I have so far: http://jsfiddle.net/DscT6/
The issue with this is, on the mac you can scroll by dragging your fingers on the touchpad. I noticed that the scrolling only works if you mouse is over the MailCol, if your mouse is over the Left or Right Col the page doesn't scroll. Any ideas? Have you seen this? Suggestions? thanks!
Here http://jsfiddle.net/laukstein/DscT6/3/ it works fine.
I agree with polarblau, if you add overflow: auto that element will automatically have the scroll as needed, if you remove the overflow rule the entire page will have the height of the highest element and so it will scroll.