在悬停滚动不适用于溢出：自动

I have used overflow:auto in a webpage and there is a scrolling problem. When I place the cursor over the content n try to scroll the entire webpage scrolls and earlier the content alone used to scroll and now it doesn't happen. Below is the code I have used.

我在网页中使用了overflow:auto,并且存在滚动问题。当我将光标放在内容上时,尝试滚动整个网页滚动,之前单独用于滚动内容,现在它不会发生。以下是我使用过的代码。

/* CSS Code */
 .about-style{
     max-width: 100%;
     max-height: 100%;
     background-color: #fff;
     color: #000;
     opacity: 0.7;
     width: 150px;
     height: 150px;
     overflow: auto;
     padding: 10px;
     text-align: justify;
     border-radius: 3px;
     position: relative;
     -webkit-overflow-scrolling:touch;
}

<!-- HTML Code -->

<div class="about-style">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>

1 个解决方案

#1

Overflow only applies if your content is more than the specified width and height of the content div. as you have mentioned width: 550px; height: 450px; the content of the <div class="about-style"> is not exceeding the above mentioned specs. in this case overflow:auto and overflow:scroll does not make any difference. If at all you want a scroll to the <div class="about-style"> div reduce its height and width such that content will overflow. try with

仅当您的内容超过内容div的指定宽度和高度时,才会应用溢出。正如你所提到的宽度:550px;身高:450px;

的内容不超过上述规格。在这种情况下溢出:自动和溢出:滚动没有任何区别。如果你想要滚动到

div减少它的高度和宽度,这样内容就会溢出。尝试

 width: 150px;
 height: 150px;

you will get the scroll as you expect.

你会得到你想象的卷轴。

#1