Overflow: Scroll;

So currently I have:

#div {
  position: relative;
  height: 510px;
  overflow-y: scroll;
}

However I don't believe that it will be obvious to some users that there is more content there. They could scroll down the page without knowing that my div actually contains a lot more content. I use the height 510px so that it cuts off some text so on some pages it does look like that there is more content, but this doesn't work for all of them.

I am using a Mac, and in Chrome and Safari the vertical scroll bar will only show when the mouse is over the Div and you actively scroll. Is there a way to always have it displaying?

---

Just ran into this problem myself. OSx Lion hides scrollbars while not in use to make it seem more "slick", but at the same time the issue you addressed comes up: people sometimes cannot see whether a div has a scroll feature or not.

The fix: In your css include -

@media(device-width: 768px) and (device-height: 1024px){
    ::-webkit-scrollbar {
        -webkit-appearance: none;
        width: 7px;
    }
    ::-webkit-scrollbar-thumb {
        border-radius: 4px;
        background-color: rgba(0,0,0,.5);
        -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
    }
}

customize the apperance as needed. Source

---

Please note on iPad Safari, NoviceCoding's solution won't work if you have - webkit-overflow-scrolling: touch; somewhere in your CSS. The solution is either removing all the occurrences of -webkit-overflow-scrolling: touch; or putting -webkit-overflow-scrolling: auto; with NoviceCoding's solution.

---

This will work with iPad on Safari on iOS 7.1.x from my testing, I'm not sure about iOS 6 though. However, it will not work on Firefox. There is a jQuery plugin which aims to be cross browser compliant called jScrollPane.

Also, there is a duplicate post here on Stack Overflow which has some other details.

链接地址: http://www.djcxy.com/p/88290.html

上一篇: 为表'tbody'生成水平滚动

下一篇: 溢出：滚动;