Re: [pointerevents] Enable mouse click and drag to scroll and other pointer behavior customizations (#512)

A few thoughts/questions here:
* Could there be a way to disable scrolling for certain elements and only allow interaction via mouse, stylus, etc.?
* What would you think about a more generic—possibly more future-proof—name like `interaction-modes`?
* Would it be useful, even essentially, to introduce a new type of media query—or even an entirely new at-rule directive—to actively set certain styles when an interaction type is happening?
  
  For example, this could help customize the animation speed between scrolling and mouse dragging, like this
  ```postcss
  .carousel {
    interaction-modes: scroll touch mouse stylus;
    /* animation-duration default */
    animation-duration: 0.5s;

    /* animation-duration overrides */
    @interaction touch, stylus { animation-duration: 2s; }
    @interaction mouse         { animation-duration: 1s; }
  }
  ```

If we think an `@interaction` could be useful but want to leave it flexible for additional features in the future, we could use a syntax similar to `@media` like `@interaction (mode: touch) or (mode: stylus)`. Alternatively, this could be added as a new feature to `@container` so it can be used like this:

* _Using a single interaction mode_
  
  ```postcss
  @container interaction(mode: scroll)
  ```
* _Checking for multiple interaction modes_
  
  ```postcss
  @container interaction((mode: touch) or (mode: stylus))
  ```
* _Combined with other container styles_
  
  ```postcss
  @container (width > 400px) and style(--responsive: true) and interaction(mode: mouse)
  ```

-- 
GitHub Notification of comment by brandonmcconnell
Please view or discuss this issue at https://github.com/w3c/pointerevents/issues/512#issuecomment-2936758498 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Tuesday, 3 June 2025 19:00:47 UTC