Paul
Reputation: 249
Unselectable scrollbar in Firefox
When a scrollable container is an a tag with a href attribute the scrollbar cannot be selected instead the whole container drags. This only occurs in Firefox. Edge, Chrome & IE11 seem okay.
a {
display: block;
width: 150px;
height: 200px;
overflow-y: auto;
/* Demo CSS */
background: #ddd;
float: left;
margin-right: 20px;
margin-bottom: 20px;
}
/* Demo CSS */
h3 {
float: left;
width: 150px;
margin: 0px 20px 0px 0px;
}
h4 {
float: left;
width: 150px;
margin: 15px 20px 15px 0px;
}
* {
font-family: Arial, sans-serif;
}<!-- Demo HTML: -->
<p>
When a scrollable container is an <code><a></code> tag with a <code>href</code> attribute then the scrollbar cannot be selected. Instead the whole container drags. This only occurs in <strong>Firefox</strong>. Edge, Chrome & IE11 seem okay.
</p>
<p>
<strong>Note: </strong>Using the mouse wheel to scroll still works.
</p>
<h4>href="#"</h4>
<h4><small>href="javascript:void(0);"</small></h4>
<h4>No href</h4>
<br clear="all" />
<!-- Buggy HTML: -->
<a href="#">
<div>
<div>Row 1</div>
<div>Row 2</div>
<div>Row 3</div>
<div>Row 4</div>
<div>Row 5</div>
<div>Row 6</div>
<div>Row 7</div>
<div>Row 8</div>
<div>Row 9</div>
<div>Row 10</div>
<div>Row 11</div>
<div>Row 12</div>
<div>Row 13</div>
<div>Row 14</div>
<div>Row 15</div>
<div>Row 16</div>
<div>Row 17</div>
<div>Row 18</div>
<div>Row 19</div>
<div>Row 20</div>
<div>Row 21</div>
<div>Row 22</div>
<div>Row 23</div>
<div>Row 24</div>
<div>Row 25</div>
<div>Row 26</div>
<div>Row 27</div>
<div>Row 28</div>
<div>Row 29</div>
<div>Row 30</div>
<div>Row 31</div>
<div>Row 32</div>
<div>Row 33</div>
<div>Row 34</div>
<div>Row 35</div>
<div>Row 36</div>
<div>Row 37</div>
<div>Row 38</div>
<div>Row 39</div>
<div>Row 40</div>
<div>Row 41</div>
<div>Row 42</div>
<div>Row 43</div>
<div>Row 44</div>
<div>Row 45</div>
<div>Row 46</div>
<div>Row 47</div>
<div>Row 48</div>
<div>Row 49</div>
<div>Row 50</div>
</div>
</a>
<a href="javascript:void(0);">
<div>
<div>Row 1</div>
<div>Row 2</div>
<div>Row 3</div>
<div>Row 4</div>
<div>Row 5</div>
<div>Row 6</div>
<div>Row 7</div>
<div>Row 8</div>
<div>Row 9</div>
<div>Row 10</div>
<div>Row 11</div>
<div>Row 12</div>
<div>Row 13</div>
<div>Row 14</div>
<div>Row 15</div>
<div>Row 16</div>
<div>Row 17</div>
<div>Row 18</div>
<div>Row 19</div>
<div>Row 20</div>
<div>Row 21</div>
<div>Row 22</div>
<div>Row 23</div>
<div>Row 24</div>
<div>Row 25</div>
<div>Row 26</div>
<div>Row 27</div>
<div>Row 28</div>
<div>Row 29</div>
<div>Row 30</div>
<div>Row 31</div>
<div>Row 32</div>
<div>Row 33</div>
<div>Row 34</div>
<div>Row 35</div>
<div>Row 36</div>
<div>Row 37</div>
<div>Row 38</div>
<div>Row 39</div>
<div>Row 40</div>
<div>Row 41</div>
<div>Row 42</div>
<div>Row 43</div>
<div>Row 44</div>
<div>Row 45</div>
<div>Row 46</div>
<div>Row 47</div>
<div>Row 48</div>
<div>Row 49</div>
<div>Row 50</div>
</div>
</a>
<a>
<div>
<div>Row 1</div>
<div>Row 2</div>
<div>Row 3</div>
<div>Row 4</div>
<div>Row 5</div>
<div>Row 6</div>
<div>Row 7</div>
<div>Row 8</div>
<div>Row 9</div>
<div>Row 10</div>
<div>Row 11</div>
<div>Row 12</div>
<div>Row 13</div>
<div>Row 14</div>
<div>Row 15</div>
<div>Row 16</div>
<div>Row 17</div>
<div>Row 18</div>
<div>Row 19</div>
<div>Row 20</div>
<div>Row 21</div>
<div>Row 22</div>
<div>Row 23</div>
<div>Row 24</div>
<div>Row 25</div>
<div>Row 26</div>
<div>Row 27</div>
<div>Row 28</div>
<div>Row 29</div>
<div>Row 30</div>
<div>Row 31</div>
<div>Row 32</div>
<div>Row 33</div>
<div>Row 34</div>
<div>Row 35</div>
<div>Row 36</div>
<div>Row 37</div>
<div>Row 38</div>
<div>Row 39</div>
<div>Row 40</div>
<div>Row 41</div>
<div>Row 42</div>
<div>Row 43</div>
<div>Row 44</div>
<div>Row 45</div>
<div>Row 46</div>
<div>Row 47</div>
<div>Row 48</div>
<div>Row 49</div>
<div>Row 50</div>
</div>
</a>
<!-- Demo HTML: -->
<br clear="all" />
<h3 style="color : red;">✘ Broken</h3>
<h3 style="color : red;">✘ Broken</h3>
<h3 style="color : green;">✔ Works</h3>Removing the href fixes the issue. Is this a Firefox bug?
See 3 examples here: Fiddle
P.S. I'm aware that a tags are strictly inline elements so aren't really meant to have inner block elements, but I believe there are scenarios that require this and I'm curious to why this issue is occurring.
Upvotes: 4
Views: 130
Answers (1)
Hidden Hobbes
Reputation: 14173
This appears to be a bug in Firefox
The crux of the issue is that you are showing a scrollbar on a clickable element and Firefox does not handle this in the same way as Chrome and IE.
Bug 367028 has been open for almost 10 years so I don't think this is going to be addressed any time soon.
Workaround
By rearranging the HTML slightly so that the overflow is applied to a div instead the scrollbar will function as expected in Firefox.
.container {
width: 200px;
height: 200px;
overflow-y: auto;
/* Demo CSS */
background: #ddd;
float: left;
margin-right: 20px;
margin-bottom: 20px;
}
/* Demo CSS */
h3 {
float: left;
width: 200px;
margin: 0px 20px 0px 0px;
}
h4 {
float: left;
width: 200px;
margin: 15px 20px 15px 0px;
}
* {
font-family: Arial, sans-serif;
}<!-- Demo HTML: -->
<p>
When a scrollable container is an <code><a></code> tag with a <code>href</code> attribute then the scrollbar cannot be selected. Instead the whole container drags. This only occurs in <strong>Firefox</strong>. Edge, Chrome & IE11 seem okay.
</p>
<p>
<strong>Note: </strong>Using the mouse wheel to scroll still works.
</p>
<h4>href="#"</h4>
<h4>href="javascript:void(0);"</h4>
<h4>No href</h4>
<br clear="all" />
<!-- Buggy HTML: -->
<div class="container">
<a href="#">
<div>Row 1</div>
<div>Row 2</div>
<div>Row 3</div>
<div>Row 4</div>
<div>Row 5</div>
<div>Row 6</div>
<div>Row 7</div>
<div>Row 8</div>
<div>Row 9</div>
<div>Row 10</div>
<div>Row 11</div>
<div>Row 12</div>
<div>Row 13</div>
<div>Row 14</div>
<div>Row 15</div>
<div>Row 16</div>
<div>Row 17</div>
<div>Row 18</div>
<div>Row 19</div>
<div>Row 20</div>
<div>Row 21</div>
<div>Row 22</div>
<div>Row 23</div>
<div>Row 24</div>
<div>Row 25</div>
<div>Row 26</div>
<div>Row 27</div>
<div>Row 28</div>
<div>Row 29</div>
<div>Row 30</div>
<div>Row 31</div>
<div>Row 32</div>
<div>Row 33</div>
<div>Row 34</div>
<div>Row 35</div>
<div>Row 36</div>
<div>Row 37</div>
<div>Row 38</div>
<div>Row 39</div>
<div>Row 40</div>
<div>Row 41</div>
<div>Row 42</div>
<div>Row 43</div>
<div>Row 44</div>
<div>Row 45</div>
<div>Row 46</div>
<div>Row 47</div>
<div>Row 48</div>
<div>Row 49</div>
<div>Row 50</div>
</a>
</div>
<div class="container">
<a href="javascript:void(0);">
<div>Row 1</div>
<div>Row 2</div>
<div>Row 3</div>
<div>Row 4</div>
<div>Row 5</div>
<div>Row 6</div>
<div>Row 7</div>
<div>Row 8</div>
<div>Row 9</div>
<div>Row 10</div>
<div>Row 11</div>
<div>Row 12</div>
<div>Row 13</div>
<div>Row 14</div>
<div>Row 15</div>
<div>Row 16</div>
<div>Row 17</div>
<div>Row 18</div>
<div>Row 19</div>
<div>Row 20</div>
<div>Row 21</div>
<div>Row 22</div>
<div>Row 23</div>
<div>Row 24</div>
<div>Row 25</div>
<div>Row 26</div>
<div>Row 27</div>
<div>Row 28</div>
<div>Row 29</div>
<div>Row 30</div>
<div>Row 31</div>
<div>Row 32</div>
<div>Row 33</div>
<div>Row 34</div>
<div>Row 35</div>
<div>Row 36</div>
<div>Row 37</div>
<div>Row 38</div>
<div>Row 39</div>
<div>Row 40</div>
<div>Row 41</div>
<div>Row 42</div>
<div>Row 43</div>
<div>Row 44</div>
<div>Row 45</div>
<div>Row 46</div>
<div>Row 47</div>
<div>Row 48</div>
<div>Row 49</div>
<div>Row 50</div>
</a>
</div>
<div class="container">
<a>
<div>Row 1</div>
<div>Row 2</div>
<div>Row 3</div>
<div>Row 4</div>
<div>Row 5</div>
<div>Row 6</div>
<div>Row 7</div>
<div>Row 8</div>
<div>Row 9</div>
<div>Row 10</div>
<div>Row 11</div>
<div>Row 12</div>
<div>Row 13</div>
<div>Row 14</div>
<div>Row 15</div>
<div>Row 16</div>
<div>Row 17</div>
<div>Row 18</div>
<div>Row 19</div>
<div>Row 20</div>
<div>Row 21</div>
<div>Row 22</div>
<div>Row 23</div>
<div>Row 24</div>
<div>Row 25</div>
<div>Row 26</div>
<div>Row 27</div>
<div>Row 28</div>
<div>Row 29</div>
<div>Row 30</div>
<div>Row 31</div>
<div>Row 32</div>
<div>Row 33</div>
<div>Row 34</div>
<div>Row 35</div>
<div>Row 36</div>
<div>Row 37</div>
<div>Row 38</div>
<div>Row 39</div>
<div>Row 40</div>
<div>Row 41</div>
<div>Row 42</div>
<div>Row 43</div>
<div>Row 44</div>
<div>Row 45</div>
<div>Row 46</div>
<div>Row 47</div>
<div>Row 48</div>
<div>Row 49</div>
<div>Row 50</div>
</a>
</div>
<!-- Demo HTML: -->
<br clear="all" />
<h3 style="color : red;">✘ Broken</h3>
<h3 style="color : red;">✘ Broken</h3>
<h3 style="color : green;">✔ Works</h3>Upvotes: 1
Related Questions
- Firefox Scrollbar not showing up in DIV
- Scrollbars in mozilla
- Hide scrollbar in firefox
- Scrollbar not working in mozilla
- Problem with the css of the scrollbar in firefox
- Scroll bar css in Mozilla
- No scroll bar in firefox
- Showing a scrollbar only in Firefox
- Doesn't appear div scrollbar Firefox
- Scrollbars does not display in Firefox