Question

我到处搜索都没有任何结果，尝试了多种解决方案，但没有结果。问题是即使有滚动条，我也无法滚动。

代码： HTML：

#schedule em, #info_holder em{
  font-style: normal;
}
#schedule .day_div li, #info_holder li {
  position: relative;
  /* background-color: red; */
  color: white;
  transition: transform .2s ease-in-out;
  cursor: pointer;
  transform: scale(1) rotate(0deg);

  border-radius: 5px;
}

#schedule .day_div li::after, #info_holder li::after {
  content: '';
  position: absolute;
  /* z-index: -1; */
  width: 100%;
  height: 100%;
  opacity: 1;
  box-shadow: 0 10px 15px rgba(0,0,0,0.3);
  border-radius: 5px;
  /* opacity: 0;
  transition: opacity 0.2s ease-in-out; */
}
#schedule .day_div:nth-child(2) li, #info_holder li.two{
  background: rgb(60,225,226);
  background: linear-gradient(315deg, rgba(60,225,226,1) 0%, rgba(28,55,172,1) 100%);
}
#schedule .day_div li a, #info_holder li a {
  top: 0;
  left: 0;
  position: absolute;
  /* width: 100%;
  height: 100%; */
  padding: calc(0.75* 1.25em);
}
#schedule .day_div li div, #info_holder li div {
  display: block;
  position: absolute;
  padding: calc(0.75*1rem);
  overflow: scroll;
  height: 60%;
  /* asdfghjklöä */
}
#schedule .day_div li a em, #info_holder li a em{
  font-size: calc(var(--main-text-size)*0.8);
}
#schedule .day_div li.content_cutoff a::before, #info_holder li.content_cutoff a::before {
  display: inline-block;
}
#schedule .day_div li a::before, #info_holder li a::before {
  content: attr(data-start) " - " attr(data-end);
  display: block;
  color: #f1f1f1;
  font-weight: bold;
  font-size: calc(var(--main-text-size)*0.9);
}
#schedule .day_div li a.databefore::before, #info_holder li a.databefore::before {
  content: attr(data-before);
}
#schedule .day_div li a em, #info_holder li a em {
  font-size: calc(var(--main-text-size)*1.2);
}
#info_holder {
  z-index: 100;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: var(--main-text-size);
  background: rgba(0, 0, 0, 0);
  transition: all .3s;
  -o-transition: all .3s;
  -moz-transition: all .3s;
  -webkit-transition: all .3s;
}
#info_holder li{
  position: absolute;
  display: block;
  transition: all .3s;
  -o-transition: all .3s;
  -moz-transition: all .3s;
  -webkit-transition: all .3s;
}
#info_holder li a:not(:nth-child(1)) {
  opacity: 0;

  transition: opacity .3s;
  -o-transition: opacity .3s;
  -moz-transition: opacity .3s;
  -webkit-transition: opacity .3s;
}

<div id="info_holder" style="background: rgba(0, 0, 0, 0.6);">
   <li class="two" style="top: 20%; height: 60%; left: 20%; width: 60%;" data-start_top="76.796875" data-start_left="173" data-start_width="238" data-end_width="100">
      <a data-start="08:00" data-end="09:00"><em>Matte</em></a><a data-before="Lärare" class="databefore" style="opacity: 1; left: calc(110px + 0.9375em);"><em>Göran</em></a><a data-before="Klassrum" class="databefore" style="opacity: 1; left: calc(189px + 0.9375em);"><em>Katedralen</em></a><a data-before="Inställd?" class="databefore" style="opacity: 1; left: calc(307px + 0.9375em);"><em>Ja</em></a>
      <div style="opacity: 1; top: calc(72px + 0.46875em);"><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span></div>
   </li>
</div>

将鼠标悬停在文本上时可以滚动（不在蓝色的ish框中。）。因此进入整页以更清楚地看到结果。

这是jsfiddle中的代码： https://jsfiddle.net/Snakehater/uhL04p81/2/

请询问更多信息。预先感谢。

Answer 1

您的不包含伪内容（#info_holder li::after）的伪元素在整个div上，并禁用了与其下的元素的所有交互。删除他。

尝试滚动时无法进行CSS滚动，但有滚动条但无法滚动

1 个答案: