1

I've got an AngularJS app that is entirely made of pages that don't require scrolling, save for one. This page works fine when it is loaded directly, i.e. I type the url into the browser, or I leave a link on a page. But when it is linked to from a bootstrap modal in the application, the page doesn't show a scrollbar and I'm unable to scroll, unless I refresh the page.

I need a way to be able to link to this page from a bootstrap modal and not force users to click refresh just to be able to use the page. I have played around with $window.reload(), $route.reload(), and html5Mode(true), but nothing seems to work. I feel like some sort of reload should do the trick, but I'm not sure what event to fire on or when to call it.

Currently my app.config.js looks something like this:

angular.
    module('myApp').
    config(['$locationProvider', '$routeProvider',
        function config($locationProvider, $routeProvider) {
            $locationProvider.hashPrefix('!');

            // Routes
            $routeProvider.
                when('/sign-in', {
                    template: '<sign-in></sign-in>'
                }).
                // ... more routes ...
                otherwise('/sign-in');
        }
    ]);

Dev tools is currently showing all of the elements under the elements tab, I just can't see them.

To be clear: I don't need the page be scrolled down upon page load. I want it to load at the top of the page, I just need the ability for a user to scroll down.

Colin Harrison
  • 184
  • 2
  • 18

1 Answers1

1

I am leaving the answer I left below because it is indeed partially correct. It solved the issue of some pages loading without a scrollbar, but not the issue of ones where I clicked on a link from a BootStrap modal not loading with a scrollbar.

The issue

Bootstrap modals use a class called modal-open on the body tag which looks something like this

.modal-open {
  overflow: hidden;
}

The idea being that when you open a bootstrap modal, it then looks like the modal is the focal point and the page behind it is sort of "frozen", i.e. you can't scroll the background page. This draws your attention to where they want it, the modal.

The problem here is, that at least with AngularJS, when you click a link from the bootstrap modal, the modal-open class isn't removed from the body tag. No modal is actually open though, so all we see is a page with overflow hidden.

Turns out there's even a Github issue about it, which is closed at the moment for some reason. I didn't read it all, it just helped confirm what I found. Go ahead and check it out if this answer doesn't solve your problem.

If you're having any sort of issue with a scrollbar not loading, bootstrap or not, you've got some sort of overflow: hidden or overflow-x: hidden etc issue somewhere. Scour your code for these properties.

The solution

I see several workarounds to this issue. I don't have all the time in the world to fix this so I have gone with a quick and dirty one for the time being.

Upon loading of my component I have simply included the following code:

let body = document.getElementsByTagName('body');
if (body[0].classList.contains('modal-open')) body[0].classList.remove('modal-open');

The problem here is that when you do open a modal on this new page, you'll be able to scroll in the background page. I don't see this as a huge issue for my purposes, so I'm leaving it for the time being.

My thinking for a better solution is possibly removing the modal-open class in the component where the link is clicked. Then maybe it won't affect the newly loaded component.

Worst case I may just need to manipulate the body tag every time I open and close a modal.

Old Not Totally Correct Answer

I kept looking for remotely related SO questions and found this one where the issue was that the overflow-x property was set to hidden and somehow causing the scroll event to not fire.

I checked my css and turns out the body tag had this same property set for some reason. I removed it and all pages are now loading with a scrollbar in the y direction.

Colin Harrison
  • 184
  • 2
  • 18