{"id":1688,"date":"2023-04-19T16:14:37","date_gmt":"2023-04-19T08:14:37","guid":{"rendered":"http:\/\/175.24.184.226\/?p=1688"},"modified":"2023-04-19T16:16:13","modified_gmt":"2023-04-19T08:16:13","slug":"%e4%bd%bf%e7%94%a8css%e4%b8%ba%e6%a8%a1%e5%9d%97%e5%a6%82div-%e6%b7%bb%e5%8a%a0%e6%bb%9a%e5%8a%a8%e6%9d%a1","status":"publish","type":"post","link":"\/?p=1688","title":{"rendered":"\u4f7f\u7528css\u4e3a\u6a21\u5757\u5982div \u6dfb\u52a0\u6eda\u52a8\u6761"},"content":{"rendered":"

div \u52a0\u6eda\u52a8\u6761\u7684\u4e24\u79cd\u65b9\u6cd5<\/h2>\n

overflow:hidden;
\noverflow:scroll;<\/p>\n

\u4e00\u3001\u6ce8\u610f<\/strong><\/p>\n

\u8bb0\u4f4f\u5bbd\u548c\u9ad8\u4e00\u5b9a\u8981\u8bbe\u7f6e\u5662\uff0c\u5426\u5219\u4e0d\u6210\u7684<\/p>\n

\u4e0d\u8fc7\u5728\u4e0d\u8d85\u51fa\u65f6\uff0c\u4f1a\u6709\u4e0b\u9762\u7684\u6eda\u52a8\u6761\uff0c\u6240\u4ee5\u4e0d\u662f\u6700\u597d\u7684\u9009\u62e9<\/p>\n

\u4e8c\u3001HTML<\/strong><\/p>\n

<div style=" overflow-y:auto; overflow-x:auto; width:400px; height:400px;\u201d><\/div><\/code><\/pre>\n
\u8bb0\u4f4f\u5bbd\u548c\u9ad8\u4e00\u5b9a\u8981\u8bbe\u7f6e\u5662\uff0c\u5426\u5219\u4e0d\u6210\u7684<\/p>\n
\u8fd9\u6837\u6bd4\u8f83\u597d\u7684\u662f\uff0c\u5728\u5bbd\u548c\u9ad8\u4e0d\u8d85\u51fa\u65f6\uff0c\u53ea\u662f\u4e00\u6761\u7ebf<\/p>\n
\u4e09\u3001\u8bf4\u660e<\/strong><\/p>\n
\u76f4\u63a5\u4e3adiv\u6307\u5b9aoverflow\u5c5e\u6027\u4e3aauto\u5373\u53ef\uff0c\u4f46\u662f\u5fc5\u987b\u6307\u5b9adiv\u7684\u9ad8\u5ea6\uff0c\u5982\u4e0b\uff1a<\/p>\n
    \n
  • \u5982\u679c\u8981\u51fa\u73b0\u6c34\u5e73\u6eda\u52a8\u6761\uff0c\u5219\uff1a overflow-x:auto<\/li>\n
  • \u540c\u7406\uff0c\u5782\u76f4\u6eda\u52a8\u6761\u4e3a\uff1a overflow-y:auto<\/li>\n
  • \u5982\u679c\u8be5div\u88ab\u5305\u542b\u5728\u5176\u4ed6\u5bf9\u8c61\u4f8b\u5982td\u4e2d\uff0c\u5219\u4f4d\u7f6e\u53ef\u8bbe\u4e3a\u76f8\u5bf9\uff1aposition:relative<\/code><\/li>\n<\/ul>\n
    \u56db\u3001\u4e24\u79cd\u65b9\u6848<\/strong>
    \n(1)\u65b9\u6848\u4e00\uff1a\u81ea\u5b9a\u4e49\u6eda\u52a8\u6761\u901a\u7528className="scrollbar"<\/code>\uff1a<\/strong><\/p>\n
      \/*\u6eda\u52a8\u6761\u6574\u4f53\u6837\u5f0f*\/\n  .scrollbar::-webkit-scrollbar {\n    \/*\u9ad8\u5bbd\u5206\u522b\u5bf9\u5e94\u6a2a\u7ad6\u6eda\u52a8\u6761\u7684\u5c3a\u5bf8*\/\n      width: 10px;    \n      height: 1px;\n  }\n  .scrollbar::-webkit-scrollbar-thumb {\/*\u6eda\u52a8\u6761\u91cc\u9762\u5c0f\u65b9\u5757*\/\n    border-radius:0 2em 2em 0;\n    background-color: #C0B7F5;\n    background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, \n    transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, \n    rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);\n  }\n  .scrollbar::-webkit-scrollbar-track {\/*\u6eda\u52a8\u6761\u91cc\u9762\u8f68\u9053*\/\n    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);\n    border-radius:0 2em 2em 0;\n    background: #EDEDED;\n  }<\/code><\/pre>\n
    (2)\u65b9\u6848\u4e8c\uff1a\u81ea\u5b9a\u4e49\u6eda\u52a8\u6761\u901a\u7528 .scroll ();<\/code> \uff1a<\/strong><\/p>\n
     \/\/ \u6eda\u52a8\u6761\n  .scroll {\n    &::-webkit-scrollbar {\n      width: 10px;\n      overflow: hidden;\n      border-radius: 0 18px 18px 0;\n      background: rgba(219, 219, 219, 1);\n    }\n    &::-webkit-scrollbar-thumb {\n      border-radius: inherit;\n      background-color: rgba(192, 183, 245, 1);\n    }\n  }<\/code><\/pre>\n
    css\u8ba9div\u6491\u6ee1\u6d4f\u89c8\u5668\u9ad8\u5ea6\u7684\u539f\u751f\u65b9\u6cd5<\/h2>\n
    CSS\u81ea\u5e26\u7684\u4e24\u4e2a\u5355\u4f4dvw\u4e0evh\u5c31\u80fd\u652f\u6301\u4e0e\u6d4f\u89c8\u5668\u7b49\u9ad8\u7b49\u5bbd\u7684\u6548\u679c\uff0c\u5b8c\u5168\u53ef\u4ee5\u629b\u5f03js<\/p>\n
    .fullbg {\n    position: relative;\n    width: 100vw;\n    height: 100vh;\n    background-position: center center;\n    background-size: cover;\n    background-repeat: no-repeat;\n}\n\n.inner-content {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    color: #fff;\n}<\/code><\/pre>\n
    \u6211\u5728\u7f8e\u5316WordPress\u76ee\u5f55\u680f\u7684\u5b9e\u64cd<\/h2>\n
    \u539f\u56fe\uff1a<\/p>\n
    \"image-20230419160441292\" <\/p>\n
    \u5f53\u524d\u7684\u76ee\u5f55\u8fb9\u680f\u662f\u56fa\u5b9a\u7684\uff0c\u957f\u5ea6\u8d85\u51fa\u65f6\u76f4\u63a5GG\uff0c\u540e\u9762\u7684\u5185\u5bb9\u5c31\u770b\u4e0d\u5230\u4e86\uff0c\u53ef\u79f0\u4e4b\u4e3abug,\u6700\u597d\u7684\u529e\u6cd5\u8fd8\u662f\u52a0\u4e00\u4e2a\u6eda\u52a8\u6761<\/p>\n
    \u64cd\u4f5c\u5982\u4e0b\uff1a<\/p>\n
    \"image-20230419161048554\" <\/p>\n
    \u6548\u679c\uff1a<\/p>\n
    \"image-20230419161305843\" <\/p>\n","protected":false},"excerpt":{"rendered":"
    div \u52a0\u6eda\u52a8\u6761\u7684\u4e24\u79cd\u65b9\u6cd5 overflow:hidden; overflow:scroll; \u4e00\u3001\u6ce8\u610f \u8bb0\u4f4f\u5bbd\u548c\u9ad8\u4e00\u5b9a\u8981\u8bbe\u7f6e\u5662\uff0c\u5426\u5219\u4e0d   \u2026 …<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"ngg_post_thumbnail":0},"categories":[79],"tags":[80,96],"_links":{"self":[{"href":"\/index.php?rest_route=\/wp\/v2\/posts\/1688"}],"collection":[{"href":"\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1688"}],"version-history":[{"count":3,"href":"\/index.php?rest_route=\/wp\/v2\/posts\/1688\/revisions"}],"predecessor-version":[{"id":1691,"href":"\/index.php?rest_route=\/wp\/v2\/posts\/1688\/revisions\/1691"}],"wp:attachment":[{"href":"\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1688"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1688"},{"taxonomy":"post_tag","embeddable":true,"href":"\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1688"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}