angular-scroll-spy icon indicating copy to clipboard operation
angular-scroll-spy copied to clipboard

Conflict with Bootstrap 4 CSS

Open MikeFB2764 opened this issue 7 years ago • 4 comments

I am working on implementing scroll-spy w/ countUp on a site that uses Bootstrap 4. CountUp without scroll-spy works fine. Scroll-spy will only work when the css for Bootstrap is omitted. I am thinking there is some conflict (somehow), but wanted to see if this was a known issue or something fairly straightforward to override.

MikeFB2764 avatar Dec 02 '18 19:12 MikeFB2764

The CSS shouldn't affect this scroll-spy at all - however if you are including the JS from bootstrap, that would likely override the window.onscroll handler which this lib uses. So make sure you aren't using the bootstrap JS and it should work... let me know.

inorganik avatar Dec 02 '18 19:12 inorganik

I will have to dig into this a little more. The Bootstrap.js library does not seem to have any impact. It's only when the Bootstrap.css file is present that scroll-spy does not work. I know this doesn't make sense, so there has to be something else that I'm missing.

MikeFB2764 avatar Dec 02 '18 20:12 MikeFB2764

I will have to dig into this a little more. The Bootstrap.js library does not seem to have any impact. It's only when the Bootstrap.css file is present that scroll-spy does not work. I know this doesn't make sense, so there has to be something else that I'm missing.

Getting a little closer....scroll-spy in a nested grid seems to be having some trouble. If I move the element outside of the nested grid it seems to work, but for some reason once it's in the sub-grid, no luck. Not sure what to make of this yet.

MikeFB2764 avatar Dec 02 '18 20:12 MikeFB2764

I will have to dig into this a little more. The Bootstrap.js library does not seem to have any impact. It's only when the Bootstrap.css file is present that scroll-spy does not work. I know this doesn't make sense, so there has to be something else that I'm missing.

Getting a little closer....scroll-spy in a nested grid seems to be having some trouble. If I move the element outside of the nested grid it seems to work, but for some reason once it's in the sub-grid, no luck. Not sure what to make of this yet.

Well...not sure if I am any closer, but the only way I can get it to work is to have an empty element preceding the element with the scroll-spy implemented. For example:

<h2></h2>
<h2 count-up id="person-count1" start-val="0" end-val="2536" duration="10" scroll-spy-event="elementScrolledIntoView" scroll-spy></h2>

MikeFB2764 avatar Dec 02 '18 21:12 MikeFB2764