单击时禁用 jquery-ui 手风琴向上滚动

Question

我当前的项目需要使用 jquery-ui 手风琴，但我遇到了一个无聊的问题。

当我点击名为“Caméras”的手风琴项目时，它会提升整个页面。

点击前： 后 ：

有代码：

<div id="accordion" class="ui-accordion ui-widget ui-helper-reset" style="width: 200px;" role="tablist">
<h4 class="ui-accordion-header ui-corner-top ui-state-default ui-accordion-icons ui-accordion-header-active ui-state-active" role="tab" id="ui-id-1" aria-controls="ui-id-1" aria-selected="true" aria-expanded="true" tabindex="0">Zones</h4>
<div class="ui-accordion-content ui-corner-bottom ui-helper-reset ui-widget-content ui-accordion-content-active" style="height: 380px; display: flex;" id="ui-id-1" aria-labelledby="ui-id-1" role="tabpanel" aria-hidden="false">
    <div id="myZonePalette" style="width: 140px; height: 285px; position: relative; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); cursor: auto;"><canvas tabindex="0" width="140" height="360" style="position: absolute; top: 0px; left: 0px; z-index: 2; user-select: none; width: 140px; height: 285px; cursor: auto;">This text is displayed if your browser does not support the Canvas HTML element.</canvas>
        <div style="position: absolute; overflow: auto; width: 140px; height: 285px; z-index: 1;">
            <div style="position: absolute; width: 1px; height: 1px;"></div>
        </div>
    </div>
</div>

<h4 class="ui-accordion-header ui-corner-top ui-accordion-header-collapsed ui-corner-all ui-state-default ui-accordion-icons" role="tab" id="ui-id-3" aria-controls="ui-id-2" aria-selected="false" aria-expanded="false" tabindex="-1">Caméras</h4>
    <div class="ui-accordion-content ui-corner-bottom ui-helper-reset ui-widget-content" id="ui-id-2" aria-labelledby="ui-id-3" role="tabpanel" aria-hidden="true" style="display: none; height: 379.8px; padding: 10px;">
        <p class="camera-count"><b id="totalCam"></b> caméras disponibles</p>
            <a href="#" class="camera-count bg-warning text-dark no-click"><b id="totalCamNotClosed"></b>{{ closedEventCams }} caméra se trouve dans un évènement non cloturé</a>
        <div id="myCameraPalette" style="width: 140px; height: 285px; position: relative; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); margin-top: 10px;"><canvas tabindex="0" width="1" height="1" style="position: absolute; top: 0px; left: 0px; z-index: 2; user-select: none; width: 1px; height: 1px;">This text is displayed if your browser does not support the Canvas HTML element.</canvas>
            <div style="position: absolute; overflow: auto; width: 18px; height: 18px; z-index: 1;">
                <div style="position: absolute; width: 61px; height: 333px;"></div>
        </div>
    </div>
</div>

（我在 Twig 页面中工作，因为我的项目在 Symfony 5 下）。

有谁知道如何禁用这个不需要的功能？我查看了它的来源，这是由于 jquery-ui 本身造成的，但我没有找到任何禁用它的选项。

Answer 1

我不太确定这是否适合你但是我的网站在使用 Chrome 时遇到了问题，我所做的设置在 CSS 下面，它解决了我的问题。

body {
  overflow-anchor: none;
}