35

Ok here is the html:

<div style="height: 200px; position: relative;"  id="filterOptionsContainer">
    <table id="filterOptionsTable" class="table table-striped table-hover">
    </table>
</div>

Basically, I am dynamically adding rows to the table and I would like the container to scroll the overflow. First I tried the obvious:

#filterOptionsContainer {
    overflow-y: auto;
}

and that works fine everywhere except for Safari on iOS mobile devices.

Since then I have spent hours trying every combination of styles I can think of and read about but I cannot get standard overflow scrolling. The closest I got was getting the scrollbar to show (it wasn't actually scrolling though).

All help is appreciated. It is hard for me to believe that it is not possible to scroll the contents of a div in a modal in Safari...

6
  • You can use two nested divs. The outer has 'overflow: auto' , the inner has 'overflow: hidden' with a set width to stop the horizontal scrollbar
    – Bug
    Feb 17, 2016 at 22:50
  • @Bug can you expand on this. I am not understanding how to implement... Feb 18, 2016 at 15:26
  • Ive expanded on this in my answer below
    – Bug
    Feb 18, 2016 at 20:48
  • Your list doesnt scroll on my iPhone6 were as my answer below does so you may have set a css rule somewhere that needs to be removed, eg.. In you filterOptionsContainer class the line: 'overflow: hidden;' doesnt need to be there.
    – Bug
    Feb 22, 2016 at 4:04
  • Did you had a look at this page: Safari Scrollbars perhaps it might help you
    – Rotan075
    Feb 22, 2016 at 15:01

10 Answers 10

16

Try applying this inline , or through a Jquery Script

 style="overflow-y: scroll; -webkit-overflow-scrolling: touch;"

or through a Jquery Script

$("#filterOptionsContainer").css({
    "overflow-y": "scroll",
    "-webkit-overflow-scrolling": "touch"
});
2
  • Adding styles with JS works, but directly through CSS doesn't. Also, mine is in modal, so I set/unset the style when the modal is shown/hidden. Jan 14, 2019 at 23:59
  • Might also be worth noting that resizing the window makes the scrolling work (even with overflow: auto, but progmatically dispatching a resize event doesn't help Jan 15, 2019 at 0:01
6

I don't have any IOS product to verify this, but it seems like overflow: auto is a known Safari bug.

Try this:

#filterOptionsContainer {
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}
2
  • 4
    Sorry for the delayed response. This does not help, there is still no scrollbar. Feb 18, 2016 at 15:25
  • 7
    Getting same issue. Tried both overflow-y as 'scroll' and 'auto', tried -webkit-overflow-scrolling as touch. Not working.
    – curtybear
    Mar 12, 2018 at 18:21
3

You can try this. It's working fine with Safari.

#filterOptionsContainer {
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}
1
  • -webkit-overflow-scrolling: touch; this one make the scroll smoothly in iphone safari.
    – Nero
    Aug 30, 2020 at 12:11
2

If none of the solutions work you could try flex: 1 1; This has cross-browser support.

1
  • My parent container is a Flex element, so applying this solution to my Flex child totally fixed my issue. Thanks!! May 27, 2021 at 15:13
1

You can set overflow-y:hidden; after overflow auto, and on safari at least that rule will be applied. Ref.

2
  • 2
    If you're copying someone's answer you really should reference to that answer, rather than portraying it as your own.
    – Chris
    Feb 17, 2016 at 22:56
  • It might, but add a reference to it. Link it.
    – Chris
    Feb 17, 2016 at 23:03
1
+100

Code for using two nested divs to show vertical scroll bar only.

<!DOCTYPE html>
<html>
<body>
<div class="div1">     
    <div class="div2">     
111111<br>
222222222222222222222<br>
3333333333333333333333333333333333<br>
44444444<br>
55555555555555555555555555555<br>
6666666666666666666666666666<br>
77777777777<br>
88888888888888888888888888<br>
99999999999999999999999<br>
0000000000000000000000000000000<br>
aaaaaaaaaaaaaaaaaa<br>
bbbb<br>
cccccccccccccccc<br>
    </div>
</div>
</body>
</html>
<style>

.div1{
    overflow:auto;
    width:100px;
    height:100px;
}
.div2{
    overflow:hidden;
    width:100%;
}
</style>
4
  • Thanks for the answer. It does indeed produce a scrollable div but on not on Safari. Feb 18, 2016 at 22:19
  • Tested OK on my iPhone6 and safari for win, sorry
    – Bug
    Feb 18, 2016 at 22:33
  • I edited the OP with a link of the broken scrolling. Would appreciate your input. I really need to solve this. Feb 21, 2016 at 2:01
  • I cant get the mobile version working on my server however try removing this line in your viewer-min.css file in the #filterOptionsContainer class 'overflow:hidden;' This will stop scrolling and may be your problem
    – Bug
    Feb 25, 2016 at 2:27
1

you can try this, it work fine for me

#filterOptionsContainer {
    overflow: auto; 
    overflow-y: auto; 
    overflow-x: hidden; 
}
2
  • 5
    This is not a sufficient solution for safari.
    – dewwwald
    Oct 12, 2017 at 16:20
  • Hi dewwwald, That is the good feedback for me, but can you share with us more about the solution?
    – Binh LE
    Oct 18, 2017 at 8:01
1

Check Your Version of Safari Browser. And match with criteria given below :

  1. Available in Safari 3.0 and later.
  2. Available in iOS 1.0 and later.

if you're against the conditions then get upto following measures:

  1. Apply ClearFix

    .clearfix:after {visibility: hidden;}

Reason: Setting overflow doesn't clear the float at the element

OR

  1. Set Position of element relative at root/body level like this :

    body { position:relative; overflow-x:hidden; }

Note: Apply only one of them.

Thanks & cheers

0

For future readers, overflow does not work on safari with display: flex You must use display: block

-3

I resolved this by switching to a multiselect (and hiding the scrollable div) on mobile devices (so no real solution). Thanks for all the help everyone.

Edit: I have finally figured this out. Basically what happened was that after I switched to using a multiselect, it too was acting weirdly in IOS devices when using Safari.

In examining further a colleague of mine noticed dojo touch events on both the scrollable div and on the multiselect (the template I am using uses dojo). I started looking around in the template's source to figure out why these events were being attached to all these elements and I noticed a dojo module called "dojo/touch". After removing this module from the project, the elements are working fine in Safari.

The take away is that 'dojo/touch' and IOS Safari are totally incompatible.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.