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.
Related
One of the pages in my website is having an issue where the page is scrollable on x-position which results the content to be cutoff. Other pages on this website is fine except for this one. I've fiddled with the classes and margin but for some reason I can't get it right.
(Live preview on responsive mode [mobile phones]: http://hub.mymagic.my/idea/frontend/explore)
Need another eye for this. Any help is greatly appreciated.
using chrome's toggle device toolbar + inspect source code, i was able to trace this CSS line on frontend.css:
.cbp .cbp-item {
width: 350px;
...
...
...
}
It seems that this width is making the content to extend beyond the size of mobile browser thus making it appear to be scrollable. I guess you can play or override this value somewhere or replace it with max-width attribute.
When I open "inspect element" in right side of page it begins to small down, and whole style is out...
How can I stop it? Make it to become scrollable?
I tried adding to css:
html{
overflow: scroll;
}
But it didn't work...
You got any ideas?
You'll typically get a scroll bar when elements are fixed in size. Meaning they have a fixed width. Set your elements to a pixel value instead of percentages. Stackoverflow for example stays in place when i open the chrome inspector.
Note that this is very counter intuitive to that of responsive design. Your site should change size, and adapt to that of the screen.
I'm working on developing a website but I'm facing an issue.
I'm creating a navigational bar which works 90% - there is just a little issue. When a user scrolls to a certain distance, the navigational bar becomes 'stuck' to the page, scrolling with the user. When the navigational bar is 'stuck', it overlaps the main browser bar.
I'm not too sure why this happens, but I believe that the div above it might be causing the issue.
Ignore the icons to the right of the page, windows eight.
Here's the whole page and stylesheet: https://gist.github.com/TaylerKing/7977e60099c3726938fb
Excuse me for the rusty styling, haven't done pure web design for a year or two;)
The problem is the use of overflow-x:hidden, combined with the navigation bar that is position:fixed. Using position:fixed in unusual situations like this is not as well supported as you might expect.
An alternative would be to use position:relative, and have JavaScript update the top as appropriate.
So in your function navigation rather than adding and removing fixed, you would instead be setting $('.navigation').css('top', window_top - div_top). (remember, the div.navigation has to be position:relative first)
If you view this HTML css site in either 1024x768 resolution or on a mobile device, the content that extends vertically beyond the browser is hidden and there is no vert scrollbar to do so. Is there any way to force it?
www.marketbridge.net
thx
On Apple OS, scroll bars are never shown anymore. I often find this a nuisance also, but I guess MacOS/iOS users are used to this. You could make some flyover indication with JavaScript using scroll height and scrollposition, but I guess you're better consistently using a pagefooter. This way the user 'feels' there is still content.
Another way to achieve this is only the upper half of the last displayed line of text is displayed (through JavaScript). The same effect is reached by displaying a rectangle with increasing opacity (0 to 100%) over the bottom of the viewport that makes the bottom of the viewport seem to fade out. If you make sure the page's bottom padding is equal or greater than the gradient, you have a nice indication of continuation, and the good thing is you can do with pure HTML and css.
I'm sorry if the title is not very good, any suggestions are welcome.
The entire page is an iframe onto another website (in this case, jquery.com just for demo purposes). I have an overlay "Hello World", and if you click on the X it minimizes it (click again it will open it).
My issue in this case is that it covers the scrollbar on the right.
I assume the reason is I have a CSS positioning the sidebar at right:0, however since it's an iFrame it doesn't count the scrollbar.
What are my options for working around that?
I thought of giving it some extra space, but how do I know if the page really has a scrollbar, or how big the scrollbar is?
Is there a way to place the overlay at a position WITHIN the iframe instead?
There is no way to detect the remote page's height or even if a scrollbar is present or not. Your only option, besides moving the sidebar to the left, is detecting the browser's scrollbar width and permanently shifting the overlay off the right edge this amount.
yes. just set the right to 40 for example right: 40px;
There is an example here that shows you how to detect if an iframe has a scrollbar:
How can I detect a Scrollbar presence ( using Javascript ) in HTML iFrame?
And there is also an example here that measures the scrollbar width
http://4umi.com/web/javascript/scrollbar.php
Once you know these you can place your overlay however many pixels from the right