When a user perform a search on my website I want to show the result in a small div with vertical scrollbars instead of that the user need to scroll the full page. That works perfect in all browsers BUT I get problems on the iPad. I can see that the search result doesn't fit into the div but no scroll bar is showing up on the iPad. Also when I try to scroll inside the div the full page is scrolled instead. Is there a solution to get this working?
HTML AND CSS:
<div class="searchResult">
//Here I show the search result
</div>
div.searchResult
{
height: 540px;
overflow: -moz-scrollbars-vertical;
overflow-y: scroll;
}
I believe the answer is that you cannot scroll unless you use the two-finger methods. However if you look at the last link, there is a workaround.
Issues:
CSS Overflow property not working in iPad
http://www.webmanwalking.org/library/experiments/dsp_frames_outer_document.html
Workaround:
http://cubiq.org/scrolling-div-on-iphone-ipod-touch
iScroll is the jQuery plugin that tahdhaze09 mentioned. And to be more specific:
iScroll is evolving and adding many new features to the basic
scrolling functionality. If all you need is the plain old scroller for
mobile webkit, you should really use iscroll-lite.js instead.
iscroll-lite.js is part of the iScroll package. It looks as if it will solve the one-finger scroll problem quite nicely.
For some odd reason changing the div to a span works on an iPad.
Related
I have recently noticed that when you have a div containing overflowed content that is scrollable, in chrome, you can smoothly transition scrolling from that div to the rest of the body, but in Safari, you can not. Instead of smoothly transitioning, the scrolling stops when you reach the top or bottom of the contained element, and you must scroll again to begin scrolling on the body. It is vital to the project I am working on that I allow Safari to scroll smoothly the same way Chrome does. For the life of me I can not figure out how to do this. Any input is appreciated, thank you for your time!
You can try my go to settings for a CSS element that is scrollable. Although I can't help you too much without seeing your code, try implementing these:
-webkit-overflow-scrolling: touch;
overflow-y: scroll;
I usually apply these for iOs devices and it does the trick. Not 100% sure if it will help your problem.
Safari separates scroll gestures for different elements on purpose so that the user can clearly tell what element is being scrolled.
Of course, you can use JavaScript to solve this in a hacky way. For example, you can set the ScrollTop of body to the amount that the user scrolled when the div has reached to the bottom.
I'm working on a project and I'm running into a big issue. I'm using bootstrap and I need the page to be full width. I'm using container-fluid. Everything works fine on desktop but on mobile the page moves side to side as if the container is bigger than the display. There is no scroll bar but you can move it around with your finger, it only moves a little bit but it is annoying. I don't even know where to check anymore. Its a site built on the Sparkpay CMS and it uses bootstrap 3. I'm not even sure how to refer to the problem, I've been looking for solutions online but I'm not finding a lot of posts similar to my situation.
The link is:
https://store55652.mysparkpay.com/
I know I'm supposed to post code, but I really am at a loss here. I've scoured through all my CSS(there are a few files) I cant figure it out. Any help here would be greatly appreciated.
This works for me
html, body {width: auto!important; overflow-x: hidden!important}
Seems even on desktop you can scroll left/right.
The simple way to fix is add:
html {
overflow-x: hidden;
}
But actually you should fix the overflow elements. For example you set padding left/right 0 for container-fluid, then you should set margin left/right to 0 for row as well(now is -15px). Otherwise it will out of the container.
I just had the same issue and I wanna emphasize what #larrylampco said once more:
There must be some elements overlapping on your actual pagesize which extends the pagesize to where this far you are able to scroll.
For me it was a tooltip I added for desktop screens. Forgot to remove it for mobile. The tooltip wasn't visible when loading the page on mobile, but it was there. That's why the page extended.
To figure out what was causing this, I put my desktop browser in developer view, chose mobile view and selected an iPhone, then "swiped" so my content was off-center. I could then hover the inspector arrow tool over the empty-looking margin until I found the culprit.
In my case, it was an issue with the mobile menu not collapsing perfectly on narrow screens.
Keep the position of the container(e.g. div, nav, etc.) static.
I had the same problem. Changing the container position in which the problem persist solved my issue.
It's all about margin, find out which main element has margin by using chrome devtool and make it margin:0;
or try this body {
margin:0;}
overflow-y: scroll; /* has to be scroll, not auto */
-webkit-overflow-scrolling: touch;
Just Copy this code in body and text. I will help you
I have a .table-responsive div inside of a .panel. When scrolling in iOS Safari, if you "grab" the screen by the .table-responsive element, it does not let you scroll vertically, only horizontally. The browser will bounce the bottom edge up and the top edge down, as if you are at the bottom of the page.
I checked the same general html structure on Bootstrap's documentation page and the vertical scrolling on .table-responsive works there.
Things I tried:
All the proposed solutions from this related ticket:
Bootstrap responsive table not scrolling vertically on iOS devices
Removed -webkit-overflow-scrolling: touch; from all elements
Checked for parents with overflow: hidden;.
Note that the tables are wrapped with the jQuery DataTables plugin, but I also tried wrapping the table in the .table-responsive div with the fnDrawCallback callback of datatables. This helps slightly in that I am now able to scroll when touching the pagination/other datatables elements around the actual table. This leads me to believe that the problem is definitely .table-responsive itself.
Also, I'm not sure if it's relevant, but the mobile view has a position: fixed; header applied.
What else do I need to consider that can prevent scrolling the page vertically on certain elements? I also noticed the same effect on a text input field, but that's less annoying since it has lots of areas around it where you can still scroll, unlike a table that takes up almost 100% width.
Thanks in advance!
EDIT: I tried Chrome on iOS, it has the same issue. Chrome on Android works perfectly.
I am trying to create a Javascript Modern UI app. The problem is, vertical scrolling doesn't work. As I try to scroll using the mouse scroll, the page (HTML file) just stays there and does nothing, and it only displays the contents that are at the top of the page (the contents that fit on the screen at the beginning)
How can I enable vertical scrolling?
I realize this is several years old, but for me this was fixed by overriding the overflow property on the html element
html {
overflow: auto;
}
I found the solution. It's because of the height:auto property. Remove it and voila ~
I am a newbie to HTML and CSS and am trying to design a website, where the majority of text will be in boxes on the screen.
Each box will be coloured differently and will have more text than is visible directly
My question
Can I make the background colour of the scroll section, ie the bit between the two arrow heads match the existing background colour?
If I could even change the colour of the actual scroll bar, that would be even better
Finally, can I get rid of the horizontal scroll bar, as it is not required ? At present it makes my box have a white band along the bottom
There are several soutions to change the style of scrollbars on websites:
Via CSS:
This doesnt work reliable: For example it works only in IE, not in firefox. So I would avoid that.
Via JavaScript:
I suggest: Hide the browser-scrollbars and make your own scrollbar using javascript and some arrow-images, so you got full control over the style.
For example you could use JQuery and JScrollPane (demo). According to the documentation this works in all modern browsers (IE, Firefox ...). If the user would disable javascript support it would still work but the scrollbars appear unstyled.
Only Internet Explorer and Opera in quirks mode support colouring browser scrollbars, so you'll need to try a javascript solution.
Interestingly, CSS defines some system colors, so if you're (very) flexible with your design you could set the background of the scroll area to match one of those. An unlikely solution though.
For the horizontal scrollbar, you could try out overflow-x: hidden; overflow-y: scroll. That is intended to stop horizontal scrolling but allow vertical scrolling. I believe it is CSS3 so is unlikely to work in all browsers.
Update: Just saw this, which should meet your needs: http://www.leigeber.com/2009/09/javascript-scrollable-div/