Related - but not a duplicate: Please remove scrollbar-width: thin from code blocks AND fix the missing ends
In Firefox: if (at the very least) the last character before a code block and the first character in the code block is selected, the scroll bars on the code block can only be dragged a few pixels before stopping.
The cursor changes to the unavailable cursor, and the dragging stops. The mouse scroll still works, as does clicking the (invisible) end arrows, or clicking the space outside of the scroll handle to move a page at a time. This affects code blocks with horizontal, vertical, and horizontal and vertical scroll bars.
Here is a sample code block with (horizontal) scroll bars to reproduce the issue.
// Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
For completeness, here is an answer with horizontal and vertical scroll bars which also demonstrates the issue.
Reproduced (on Windows 10) in:
Appears to be fine (on Windows 10) in:
I suspect that this is to do with the differences in how the scroll bars are displayed by different browsers, e.g.
- Firefox has square scroll bar and no end arrows,
- Chrome has a round scroll bar and no end arrows,
- Edge has a square scroll bar and end arrows.
<pre><code>
elements results in Firefox considering the elements to be selected. Thus, the scrollbar is within the selection. You clicking on the scrollbar and moving the mouse is then recognized by Firefox as an attempt to drag the selected text, rather than an attempt to move the scrollbar. This is definitely not an issue with SE, but is just how Firefox treats that situation. It has nothing to do with the CSS which SE uses to hide the scrollbar arrows (I use CSS styles which restore them and I see the same issue).