Double scroll bars in Chrome/Linux about battleforthenet-widget

[lap00zza]

Hi, I am getting 3 scrollbars.

• Browser: Chrome 59.0.3071.115 (Official Build) (64-bit)
• OS: Windows 8.1

Edit: This middle scrollbar goes away if #_bftn_wrapper is set to overflow-y: auto instead of overflow-y: scroll

[mikemorris]

I've seen this on IE11 in a VM too, I'm sure there's a fix that involves overflow, but not sure exactly what it is, and we've had issues with iframe scrolling being finnicky on iOS.

[as-com]

I think the quickest solution would be to disable scrolling of the body when the modal is open, while still allowing scrolling within the modal wrapper thingy.

[mikemorris]

I'd be hesitant to push something like that with the widget getting traffic now, don't want to accidentally break everyone's site!

[mikemorris]

One possible solution to avoid the double scrollbars (and scroll overlap on iOS) could be using the Shadow DOM as browser support allows in createIframe, although I think this may require reworking some structure to @import CSS inline and load remote HTML (probably with fetch if we'd already be restricting this to Shadow DOM support), and possibly other changes?

I'd accept a pull request for either the Shadow DOM approach or simply disabling scrolling while the modal is open and enabling it when the modal is removed.

[realsrikar]

You don’t need overflow hiddden. You can style the scrollbar using ::-webkit-scrollbar (Needs prefix)

 ::-webkit-scrollbar {
  display: none;
}

Be careful in using this because people who primarily use scrollbar to scroll will not be able to scroll.