parent
a4f21a7694
commit
45cfc25609
5 changed files with 139 additions and 8 deletions
@ -0,0 +1,97 @@ |
||||
import React from "react"; |
||||
|
||||
import ScrollContainer from "react-indiana-drag-scroll"; |
||||
/** min から max までの数字の入った配列を生成する関数 */ |
||||
const range = (min, max, step = 1) => { |
||||
return Array.from( |
||||
{ length: (max - min + step) / step }, |
||||
(v, k) => min + k * step |
||||
); |
||||
}; |
||||
export default function IndianaDragScroll() { |
||||
return ( |
||||
<div className="bg-blue-400 p-4 h-52"> |
||||
<ScrollContainer ignoreElements={"#not-work-drag"}> |
||||
<div |
||||
className="bg-red-400 h-52" |
||||
id="not-work-drag" |
||||
style={{ |
||||
height: "100%", |
||||
background: "rgba(0, 208, 255, 0.8)", |
||||
position: "absolute", |
||||
display: "flex", |
||||
flexDirection: "column", |
||||
justifyContent: "space-between", |
||||
left: "12%", |
||||
}} |
||||
></div> |
||||
<div className="flex flex-col h-52 bg-red-400" style={{}}> |
||||
<div>mahdi</div> |
||||
<div>mahdi</div> |
||||
<div>mahdi</div> |
||||
<div>mahdi</div> |
||||
<div>mahdi</div> |
||||
<div>mahdi</div> |
||||
<div>mahdi</div> |
||||
<div>mahdi</div> |
||||
<div>mahdi</div> |
||||
<div>mahdi</div> |
||||
<div>mahdi</div> |
||||
<div>mahdi</div> |
||||
<div>mahdi</div> |
||||
<div>mahdi</div> |
||||
<div>mahdi</div> |
||||
<div>mahdi</div> |
||||
<div>mahdi</div> |
||||
<div>mahdi</div> |
||||
<div>mahdi</div> |
||||
<div>mahdi</div> |
||||
<div>mahdi</div> |
||||
<div>mahdi</div> |
||||
<div>mahdi</div> |
||||
<div>mahdi</div> |
||||
<div>mahdi</div> |
||||
<div>mahdi</div> |
||||
<div>mahdi</div> |
||||
<div>mahdi</div> |
||||
<div>mahdi</div> |
||||
<div>mahdi</div> |
||||
<div>mahdi</div> |
||||
<div>mahdi</div> |
||||
<div>mahdi</div> |
||||
<div>mahdi</div> |
||||
<div>mahdi</div> |
||||
<div>mahdi</div> |
||||
</div> |
||||
</ScrollContainer> |
||||
<div className="w-full bg-yellow-300 h-5 my-20 text-center text-base text-red-600 rounded"> |
||||
divider between vertical && horizontal scroll bar inside |
||||
IndianaDragScroll COMPONENT |
||||
</div> |
||||
<ScrollContainer ignoreElements={"#not-work-drag"}> |
||||
<div |
||||
id="not-work-drag" |
||||
style={{ |
||||
height: "100%", |
||||
background: "rgba(0, 208, 255, 0.8)", |
||||
position: "absolute", |
||||
display: "flex", |
||||
flexDirection: "column", |
||||
justifyContent: "space-between", |
||||
left: "12%", |
||||
}} |
||||
> |
||||
<div>この上では</div> |
||||
<div>ドラッグしてもスクロールしません</div> |
||||
</div> |
||||
<div style={{ display: "flex" }}> |
||||
{range(0, 100).map((i, index) => ( |
||||
<div key={index} style={{ margin: "1em .25em" }}> |
||||
{i} |
||||
</div> |
||||
))} |
||||
</div> |
||||
</ScrollContainer> |
||||
</div> |
||||
); |
||||
} |
||||
Loading…
Reference in new issue