Событие Onclick отказывается работать

Question

Я написал некоторую функцию для прокрутки тела моей страницы, но по какой-то причине это не сработает. Я подозреваю, что это связано с моими таблицами стилей. Как исправить это, не удаляя блокировку HTML-кода?

My Codepen sandbox.

$(document).on('click', '.scroll', function() { 
 
    $("body").animate({ 
 
    scrollTop: 500 
 
    }, 'slow'); 
 
})

canvas { 
 
    width: 100%; 
 
    height: 100vh; 
 
    position: fixed; 
 
    } 
 
    body { 
 
    height: 1000vh; 
 
    margin: 0; 
 
    overflow-y: auto; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<canvas id="canvas"></canvas> 
 
<div class="scroll" style="display: block;"> 
 
    CLICK TO SCROLL 
 
</div>

Answer 1

Вы были правы, это связано с таблицей стилей.

Вы размещаете холст фиксированным образом. Это удаляет его из потока и добавляет его к собственному отдельному «слою», если вы это сделаете. По умолчанию этот слой находится поверх любого статического уровня.

Что это на самом деле означает: когда вы думаете, что нажимаете на div .scroll, вы нажимаете на холст, потому что он сидит сверху.

способов решить эту проблему:

• Добавить z-index: -1 в холст (хотя это будет скрывать его за содержание, не рекомендуется)
• Добавить pointer-events: none на холсте (в зависимости от цели холста, это не могло бы быть полезным либо. Нажмите событие «проваливается» холст)
• Расположите холст где-то еще (рекомендуется)
• Позиции .scrollrelative LY (с более высоким индексом г чем холст) (рекомендуется)

Не зная, для чего вы собираетесь использовать этот холст, трудно сказать, что вы должны делать.

Answer 2

Просто добавьте position: relative; в ваш <div> в Codepen.

<canvas id="canvas"></canvas> 
<div class="scroll" style="display: block; position: relative;"> 
    CLICK TO SCROLL 
</div> 

Надеюсь, это поможет!