1, in the project encountered the page appears to have the scroll bar of the bullet box, there is a drop-down box in the box, the contents of the drop-down box is too much, you need to limit the length of the drop-down box, so it becomes a slider box with a scroll bar appears in the drop-down box, but even if the drop-down box added scroll bar, the bottom of the drop-down box will appear in the box Do not play outside of the frame to display visually. This involves two aspects of the content.
First, how to let the frame bounce out.
Second, how to let the bouncing out of the box when the scroll bar scrolling with the scroll bar changes instead of fixed at a certain point.
First question:
Let the frame bounce out is to give the frame a fixed position, which involves the layout of the location of the relevant knowledge. View the related properties of position in detail.
In order for the frame to pop out, let the box position is fixed.
The second problem: let the pop out of the frame relative to the click of the parent element is unchanged (relative to their own select box is not changed), when the scroll bar scrolling, the box disappears, after scrolling the end of the click on the box, the box appears, the position of the Frame property distance is calculated as: top=$ (this) [0]. Getboundingclientrect (). Top;
Getboundingclientrect () does not calculate the position of the external scrollbar, so the position appears relatively correctly.
Getboundingclientrect ()
This method returns a rectangle object that contains four properties: Left, top, right, and bottom. Represents the distance between the edges of the element and the top and left sides of the page, respectively.
var Box=document.getelementbyid (' box '); Get element
Alert (Box.getboundingclientrect (). top); The distance from the top of the page to the top of the element
Alert (Box.getboundingclientrect (). right); Distance to the right of the element from the left side of the page
Alert (Box.getboundingclientrect (). bottom); The distance from the top of the page below the element
Alert (Box.getboundingclientrect (). left); Distance from left side of element to the left of the page
2, when the external scroll bar scrolling, how to let the frame to pick up the problem.
$ (' External scrollbar area '). Bind (' MouseWheel ', function () {
$ (' drop-down box '). Hide ();
$ (' dropdown box '). Removeclass (' Display attributes ');
});
3, click on other areas, the drop-down box is closed.
$ (document). Click (function (e) {
if (!$ (E.target). is (". Dummy") &&!$ (E.target). Is (". Options")) {
$ (". Options"). Removeclass ("show");
$ (". Options"). Hide ();
}
});
