I have a single-page mobile bootstrap site that when scrolling, the fixed navigation bar covers over the section titles when tapping on a link in the navigation menu. I found that this is being caused by CSS scroll snap points. I tried to set scroll-snap-type: none; on the .section class for all sections but it still produces the bug. How do I properly disable CSS scroll snap points for the entire page?
Asked
Active
Viewed 2,257 times
1
Daniel Harris
- 1,805
- 10
- 45
- 63
-
Please provide example like with jsfiddle. – Saravana Jan 03 '18 at 06:23
-
@Sharvan Due to the vast size of the page and possible external script interference, I cannot simply recreate the problem on a small scale. However, here's a link to the development site: https://dev.spacecoastsites.com/ – Daniel Harris Jan 03 '18 at 06:26
-
links says- You don't have permission to access / on this server. – Saravana Jan 03 '18 at 06:28
-
@Sharvan A U.S. VPN is required to access the site. – Daniel Harris Jan 03 '18 at 06:29
1 Answers
1
May be it will help. Try below
* Keyword values */
scroll-snap-type: none;
scroll-snap-type: mandatory;
scroll-snap-type: proximity;
/* Global values */
scroll-snap-type: inherit;
scroll-snap-type: initial;
scroll-snap-type: unset;
As same as Y follow.(scroll-snap-type-y)
/* Keyword values */
scroll-snap-type-x: none;
scroll-snap-type-x: mandatory;
scroll-snap-type-x: proximity;
/* Global values */
scroll-snap-type-x: inherit;
scroll-snap-type-x: initial;
scroll-snap-type-x: unset;
Saravana
- 3,389
- 4
- 21
- 37
-
`scroll-snap-type-x` and `scroll-snap-type-y` according to https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-type-x and https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-type-y are on non-standards tracks. Still, they do not fix the problem. – Daniel Harris Jan 03 '18 at 06:35
-