Simple and easy - to simulate scroll bars using the Web existing DIV element.

xiaoxiao2021-03-06  84

First, declare this method is not my original. But I haven't seen it in other places, so I wrote everyone to share. Web write more sometimes possible to use a single scroll bar. What should I do? Write one? Trouble, and the slider inside the scroll is dynamically changed. Here there is a simple approach to simulate with div. Key principle: After the contents of the DIV exceeds the size of the DIV, if this DivLow is overflow is scroll, then There will be a scroll bar. Good! Scroll, you don't move, we will be you. According to this principle, we can do this: 1, create a layer, if you want the rolling strip, set the Style Overflow-x Scroll, overflow-y is Hidden. The longitudinal, the style's overflow-y is scroll, overflow-x is hidden; setting the width of the setting or high to the length of the scroll bar you want. Then the corresponding setting is high or Wide is 0px; hey, I have a speech, I don't understand, simply talk about it ~ That is to drag the Div into only the scroll bar is right, how to drag? Oh, I took it on the horse. I took it. 2. Put a horizontal line in the DIV (if you need a horizontal scroll bar), size is 0. If you want vertical direction, put a width of 0 Div. 3. In this way, this DIV can be used as a scroll bar. For specific use, we only need to put the horizontal line or the width or high of the width of 0 to the ScrollHeight you want to scroll. Of course, such scroll bars will not have effect. We must The simulated scroll bar DIV plus the onscroll event, synchronizing this DIV ScrollTop / ScrollLeft to you to really drag the object. 4. Last place in a bad point: this simulated DIV how little small There will be only a scroll bar, which is also a little blank space, and it is very clear to the unit grie. So use it under other layers (setting a small Z-Index can be Blocking). The right is a way, have the ability to write itself or write it yourself.

转载请注明原文地址:https://www.9cbs.com/read-94606.html

New Post(0)