1

这真的很奇怪；我有一个简单的页面，我想使用锚链接来滚动视图中的表格元素。

这是我希望它的行为：https ://codepen.io/jason-s/full/MWwaRNz?nokatex - 链接在顶部，表格在底部，相应的行滚动到视图中。

问题是，当我启用 KaTeX（调用renderMathInElement）时，滚动行为会发生变化；相反，有问题的行会跳到页面顶部，顶部的链接会消失：https ://codepen.io/jason-s/full/MWwaRNz

源代码非常简单（https://codepen.io/jason-s/pen/MWwaRNz，转载如下）。

为什么会发生这种情况，我该如何解决？我使用 Chrome 的开发工具来检查 CSS，我看不出任何可以解释它的差异。

<!DOCTYPE html><html><head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.10.2/katex.min.css">
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.10.2/katex.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.10.2/contrib/auto-render.min.js"></script>
<script type='text/javascript'>
      window.addEventListener('DOMContentLoaded',function() {
         if (window.location.search != '?nokatex')
         {
             renderMathInElement(document.body, {delimiters:
                [
                  {left: "$$", right: "$$", display: true},
                  {left: "\\(", right: "\\)", display: false},
                  {left: "\\[", right: "\\]", display: true}
                ]
             });
         }
      });
    </script>    
<style type='text/css'>
  html, body {
    height: 100%;
    overflow: hidden;
  }
  div.top {
    height: 45%;
  }
  div.container {
    height: 50%;
    overflow-y: scroll;
  }
  table {
    border-collapse: collapse;
  }
  table, table td {
    border: 1px solid black;
  }
</style>
</head><body>
<div class="top">
<ul>
<li><a href="#5">Row 5</a></li>
<li><a href="#25">Row 25</a></li>
<li><a href="#50">Row 50</a></li>
<li><a href="#95">Row 95</a></li>
</div>
<div class="container">
<table>
<tr id='0'><td>0</td><td>\( x_{0} \)</tr>
<tr id='1'><td>1</td><td>\( x_{1} \)</tr>
<tr id='2'><td>2</td><td>\( x_{2} \)</tr>
<tr id='3'><td>3</td><td>\( x_{3} \)</tr>
<tr id='4'><td>4</td><td>\( x_{4} \)</tr>
<tr id='5'><td>5</td><td>\( x_{5} \)</tr>
<tr id='6'><td>6</td><td>\( x_{6} \)</tr>
<tr id='7'><td>7</td><td>\( x_{7} \)</tr>
<tr id='8'><td>8</td><td>\( x_{8} \)</tr>
<tr id='9'><td>9</td><td>\( x_{9} \)</tr>
<tr id='10'><td>10</td><td>\( x_{10} \)</tr>
<tr id='11'><td>11</td><td>\( x_{11} \)</tr>
<tr id='12'><td>12</td><td>\( x_{12} \)</tr>
<tr id='13'><td>13</td><td>\( x_{13} \)</tr>
<tr id='14'><td>14</td><td>\( x_{14} \)</tr>
<tr id='15'><td>15</td><td>\( x_{15} \)</tr>
<tr id='16'><td>16</td><td>\( x_{16} \)</tr>
<tr id='17'><td>17</td><td>\( x_{17} \)</tr>
<tr id='18'><td>18</td><td>\( x_{18} \)</tr>
<tr id='19'><td>19</td><td>\( x_{19} \)</tr>
<tr id='20'><td>20</td><td>\( x_{20} \)</tr>
<tr id='21'><td>21</td><td>\( x_{21} \)</tr>
<tr id='22'><td>22</td><td>\( x_{22} \)</tr>
<tr id='23'><td>23</td><td>\( x_{23} \)</tr>
<tr id='24'><td>24</td><td>\( x_{24} \)</tr>
<tr id='25'><td>25</td><td>\( x_{25} \)</tr>
<tr id='26'><td>26</td><td>\( x_{26} \)</tr>
<tr id='27'><td>27</td><td>\( x_{27} \)</tr>
<tr id='28'><td>28</td><td>\( x_{28} \)</tr>
<tr id='29'><td>29</td><td>\( x_{29} \)</tr>
<tr id='30'><td>30</td><td>\( x_{30} \)</tr>
<tr id='31'><td>31</td><td>\( x_{31} \)</tr>
<tr id='32'><td>32</td><td>\( x_{32} \)</tr>
<tr id='33'><td>33</td><td>\( x_{33} \)</tr>
<tr id='34'><td>34</td><td>\( x_{34} \)</tr>
<tr id='35'><td>35</td><td>\( x_{35} \)</tr>
<tr id='36'><td>36</td><td>\( x_{36} \)</tr>
<tr id='37'><td>37</td><td>\( x_{37} \)</tr>
<tr id='38'><td>38</td><td>\( x_{38} \)</tr>
<tr id='39'><td>39</td><td>\( x_{39} \)</tr>
<tr id='40'><td>40</td><td>\( x_{40} \)</tr>
<tr id='41'><td>41</td><td>\( x_{41} \)</tr>
<tr id='42'><td>42</td><td>\( x_{42} \)</tr>
<tr id='43'><td>43</td><td>\( x_{43} \)</tr>
<tr id='44'><td>44</td><td>\( x_{44} \)</tr>
<tr id='45'><td>45</td><td>\( x_{45} \)</tr>
<tr id='46'><td>46</td><td>\( x_{46} \)</tr>
<tr id='47'><td>47</td><td>\( x_{47} \)</tr>
<tr id='48'><td>48</td><td>\( x_{48} \)</tr>
<tr id='49'><td>49</td><td>\( x_{49} \)</tr>
<tr id='50'><td>50</td><td>\( x_{50} \)</tr>
<tr id='51'><td>51</td><td>\( x_{51} \)</tr>
<tr id='52'><td>52</td><td>\( x_{52} \)</tr>
<tr id='53'><td>53</td><td>\( x_{53} \)</tr>
<tr id='54'><td>54</td><td>\( x_{54} \)</tr>
<tr id='55'><td>55</td><td>\( x_{55} \)</tr>
<tr id='56'><td>56</td><td>\( x_{56} \)</tr>
<tr id='57'><td>57</td><td>\( x_{57} \)</tr>
<tr id='58'><td>58</td><td>\( x_{58} \)</tr>
<tr id='59'><td>59</td><td>\( x_{59} \)</tr>
<tr id='60'><td>60</td><td>\( x_{60} \)</tr>
<tr id='61'><td>61</td><td>\( x_{61} \)</tr>
<tr id='62'><td>62</td><td>\( x_{62} \)</tr>
<tr id='63'><td>63</td><td>\( x_{63} \)</tr>
<tr id='64'><td>64</td><td>\( x_{64} \)</tr>
<tr id='65'><td>65</td><td>\( x_{65} \)</tr>
<tr id='66'><td>66</td><td>\( x_{66} \)</tr>
<tr id='67'><td>67</td><td>\( x_{67} \)</tr>
<tr id='68'><td>68</td><td>\( x_{68} \)</tr>
<tr id='69'><td>69</td><td>\( x_{69} \)</tr>
<tr id='70'><td>70</td><td>\( x_{70} \)</tr>
<tr id='71'><td>71</td><td>\( x_{71} \)</tr>
<tr id='72'><td>72</td><td>\( x_{72} \)</tr>
<tr id='73'><td>73</td><td>\( x_{73} \)</tr>
<tr id='74'><td>74</td><td>\( x_{74} \)</tr>
<tr id='75'><td>75</td><td>\( x_{75} \)</tr>
<tr id='76'><td>76</td><td>\( x_{76} \)</tr>
<tr id='77'><td>77</td><td>\( x_{77} \)</tr>
<tr id='78'><td>78</td><td>\( x_{78} \)</tr>
<tr id='79'><td>79</td><td>\( x_{79} \)</tr>
<tr id='80'><td>80</td><td>\( x_{80} \)</tr>
<tr id='81'><td>81</td><td>\( x_{81} \)</tr>
<tr id='82'><td>82</td><td>\( x_{82} \)</tr>
<tr id='83'><td>83</td><td>\( x_{83} \)</tr>
<tr id='84'><td>84</td><td>\( x_{84} \)</tr>
<tr id='85'><td>85</td><td>\( x_{85} \)</tr>
<tr id='86'><td>86</td><td>\( x_{86} \)</tr>
<tr id='87'><td>87</td><td>\( x_{87} \)</tr>
<tr id='88'><td>88</td><td>\( x_{88} \)</tr>
<tr id='89'><td>89</td><td>\( x_{89} \)</tr>
<tr id='90'><td>90</td><td>\( x_{90} \)</tr>
<tr id='91'><td>91</td><td>\( x_{91} \)</tr>
<tr id='92'><td>92</td><td>\( x_{92} \)</tr>
<tr id='93'><td>93</td><td>\( x_{93} \)</tr>
<tr id='94'><td>94</td><td>\( x_{94} \)</tr>
<tr id='95'><td>95</td><td>\( x_{95} \)</tr>
<tr id='96'><td>96</td><td>\( x_{96} \)</tr>
<tr id='97'><td>97</td><td>\( x_{97} \)</tr>
<tr id='98'><td>98</td><td>\( x_{98} \)</tr>
<tr id='99'><td>99</td><td>\( x_{99} \)</tr>
</table>
</div>
</body>
</html>
4

1 回答 1

2

我想通了，至少在某种程度上。由于某种原因， KaTeX 使用了一个隐藏元素position: absolute，并且它的祖先中没有任何position: relative容器。如果我将它添加到我的 css 中，那么它可以解决问题。

div.container {
  height: 50%;
  overflow-y: scroll;
  position: relative;
}

见：https ://codepen.io/jason-s/full/wvaMavP

于 2020-02-13T14:06:06.840 回答