スクロール可能なコンテナがhref属性を持つaタグの場合、コンテナ全体がドラッグされる代わりにスクロールバーを選択できません。これは、のFirefoxにのみ発生します。エッジ、クロム& IE11は大丈夫です。 href修正問題を削除Firefoxで選択できないスクロールバー

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>&lt;a&gt;</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;">&#10008; Broken</h3> 
 
<h3 style="color : red;">&#10008; Broken</h3> 
 
<h3 style="color : green;">&#10004; Works</h3>

。これはFirefoxのバグですか？ Fiddle

P.S.：

はここ3例を参照してください。私はaタグが厳密にinline要素であることを認識しています。実際には内側のblock要素を持つつもりはありませんが、これが必要なシナリオがあると思います。なぜこの問題が発生しているのか不思議です。

出典

2017-01-05 Paul

がっかり！ Firefoxのバグでなければならない！ – nashcheez

クロム、IE、エッジでも動作していません –

うーん、私はそれをバジルに投稿するかもしれません。私は他のブラウザーでも再現できませんでした。■ – Paul

これが問題の核心は、あなたがクリック可能な要素にスクロールバーが表示され、FirefoxはChromeとIEと同じように、これを処理しないということであるFirefoxの

のバグに表示されます。

Bug 367028はほぼ10年間開いていますので、これはすぐに対応されるとは思われません。

オーバーフローがFirefoxで期待通りに機能します`div`代わりに、スクロールバーに適用されるように、わずかにHTMLを再配置することで回避策

。

.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>&lt;a&gt;</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;">&#10008; Broken</h3> 
 
<h3 style="color : red;">&#10008; Broken</h3> 
 
<h3 style="color : green;">&#10004; Works</h3>

出典

2017-01-05 14:32:43

うわー10年：いいバグが見つかりました。あなたの提案と同様に、私は最後にアンカータグを取り替えることにしました。 – Paul

Firefoxで選択できないスクロールバー

答えて

これが問題の核心は、あなたがクリック可能な要素にスクロールバーが表示され、FirefoxはChromeとIEと同じように、これを処理しないということであるFirefoxの

オーバーフローがFirefoxで期待通りに機能しますdiv代わりに、スクロールバーに適用されるように、わずかにHTMLを再配置することで回避策

関連する問題

オーバーフローがFirefoxで期待通りに機能します`div`代わりに、スクロールバーに適用されるように、わずかにHTMLを再配置することで回避策