When on the mobile version I want to scroll the category page, where there are sliders with categories, “grabbing” the slider the page does not scroll, but the slider moves vertically by a certain value. When we use the slider to the right or left the problem no longer occurs. Simply the glitch appears when you try to scroll the page by grabbing the slider. I saw somewhere a solution to the problem in connection with slider products, but I can’t find it on the forum. Please help. Thank you. Dawn theme.
The issue you’re describing might be related to conflicting touch events between the slider element and the mobile browser’s default touch behavior for scrolling. To address this problem, consider these potential solutions:
CSS/Styles Modification: Check if there are any CSS rules applied to the slider or its container that might be interfering with the default touch behavior for scrolling. Adjusting the CSS properties, such as overflow, touch-action, or pointer-events, could help resolve the conflict.
JavaScript Event Handling: Use JavaScript to handle touch events explicitly on the slider element. You can prevent the default behavior of the slider when the user tries to scroll by detecting and handling touch events using event listeners and the preventDefault() method.
Responsive Design Consideration: Review the layout and responsiveness of the slider element on mobile devices. Modifying the slider’s design or functionality specifically for mobile devices might resolve the issue. Consider using libraries or plugins that provide better touch support for sliders in mobile views.
Testing on Multiple Devices/Browsers: Ensure that the issue is reproducible across different mobile devices and browsers. Sometimes, specific browser behaviors or device-specific quirks might cause this problem. Testing on various platforms can help identify the root cause.
Update or Change Slider Component: If you’re using a third-party slider component or plugin, check for updates or alternatives that might have addressed similar issues in their newer versions. Updating the slider component or using a different one altogether could potentially resolve the problem.
Consult Shopify Support or Community: If the issue persists and is specific to the Shopify platform, consider reaching out to Shopify support or consulting their community forums. Other users or Shopify experts might have encountered similar issues and could provide guidance or specific solutions.
It’s crucial to approach these changes carefully and test thoroughly to ensure they don’t introduce unintended side effects or break other functionalities on your Shopify store.
So this code should go at the very top of base.css (before other code)?
Would you mind posting your code as an example, as I’m not very versed with the code and not entirely sure what should be the “component” I need to add. Mine should be very similar to yours as I have the exact same issue.
on the bottom of file base.css, but you have to paste your component id instead of mine (you can check it by checking the site code - right click and examine an element)
Thank you for taking the time to explain. I gave it a try but could not get it to work. Could be me not doing it properly or might be due to difference in the themes, etc. Will try to check further in the forums. Appreciate it anyways, thanks!
