From 43001d71c5a2039274a4c69dfb3638e03993cc57 Mon Sep 17 00:00:00 2001 From: aurovrata Date: Sun, 12 Sep 2021 15:00:13 +0530 Subject: [PATCH] overscroll fix --- README.md | 1 + hybrid-dropdown.css | 1 + min/hybrid-dropdown.min.css | 2 +- 3 files changed, 3 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 14a0314..adb9615 100755 --- a/README.md +++ b/README.md @@ -10,6 +10,7 @@ For detailed documentation see the [GitHub Page](https://aurovrata.github.io/hyb ### v2.0.5 * improve overflow auto scrollbar * fix duplicate name issue. +* stop overscrolling in srcolled-enabled dropdown ### v2.0.4 * enable field resest on form reset. ### v2.0.3 diff --git a/hybrid-dropdown.css b/hybrid-dropdown.css index 5bf28cd..97e77b9 100755 --- a/hybrid-dropdown.css +++ b/hybrid-dropdown.css @@ -51,6 +51,7 @@ select.hybridddised{ scrollbar-width: thin; height: 100%; background-color: inherit; + overscroll-behavior:contain; } .hybrid-dropdown.active > .hybriddd-wrapper{ display: block; diff --git a/min/hybrid-dropdown.min.css b/min/hybrid-dropdown.min.css index 4232cd0..4bfb2b1 100644 --- a/min/hybrid-dropdown.min.css +++ b/min/hybrid-dropdown.min.css @@ -1 +1 @@ -.hybrid-dropdown{position:relative;width:max-content;min-width:30px;min-height:2.5em;display:inline-block;vertical-align:baseline;font-size:1em;border:1px solid #6f6f6f;border-radius:.25em;padding:0 30px 0 18px;cursor:pointer;background:inherit}select.hybridddised{visibility:hidden!important;width:0!important;height:0!important}.hybrid-dropdown:focus{box-shadow:1px 1px 3px}.hybriddd-option::before,.hybriddd-group::before{display:none!important;content:none;margin:0;padding:0}.hybridddised:disabled+.hybrid-dropdown{background:#ccc;color:grey}.hybrid-dropdown .hybriddd-wrapper{overflow:hidden;z-index:7777;position:absolute;left:0;max-height:34vh;min-width:max-content;display:none;background-color:inherit}.hybrid-dropdown ul.hybriddd-options{border:1px solid #6f6f6f;border-radius:.25em;list-style:none!important;margin:0!important;padding:0!important;overflow-y:auto;scrollbar-width:thin;height:100%;background-color:inherit}.hybrid-dropdown.active>.hybriddd-wrapper{display:block}.hybrid-dropdown *,.hybrid-dropdown .hybriddd-options .hybriddd-option,.hybrid-dropdown .hybriddd-options .hybriddd-option ul,.hybrid-dropdown .hybriddd-options .hybriddd-group,.hybrid-dropdown .hybriddd-options .hybriddd-group ul{box-sizing:border-box;cursor:default;margin:0}.hybriddd-selected{position:relative;width:max-content;height:100%;padding:.4em 3px;cursor:pointer;min-width:100%;max-width:inherit;display:inline-block;z-index:7}.hybriddd-selected::after{border-bottom:2px solid #90a1b5;border-right:2px solid #90a1b5;content:'';display:block;height:5px;margin-top:-4px;pointer-events:none;position:absolute;right:-12px;top:50%;-webkit-transform-origin:66% 66%;-ms-transform-origin:66% 66%;transform-origin:66% 66%;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);-webkit-transition:all 0.15s ease-in-out;transition:all 0.15s ease-in-out;width:5px}.hybriddd-landscape .hybriddd-options>.hybriddd-option,.hybriddd-landscape .hybriddd-options>.hybriddd-group>ul>.hybriddd-option{display:inline-block}.hybriddd-landscape .hybriddd-options .hybridddl:dir(rtl){float:right}.hybriddd-landscape .hybriddd-options .hybriddd-group{clear:both;border-top:none;padding:0}.hybriddd-landscape .hybriddd-option>label{padding:.1em}ul.hybriddd-options::-webkit-scrollbar{width:6px}ul.hybriddd-options::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px rgb(1 1 1 / 35%)}.hybriddd-options ul{list-style:none;padding:0}.hybriddd-group>span{font-weight:700}.hybriddd-l0{padding:0 .5em}.hybriddd-l1{padding:0 1em 0 1em}.hybriddd-l2{padding:0 1em 0 1.5em}.hybriddd-l3{padding:0 1em 0 2em}.hybriddd-l4{padding:0 1em 0 2.5em}.hybriddd-l5{padding:0 1em 0 3em}.hybriddd-group>span{padding:0 .5em}.hybriddd-options ul .hybriddd-group>span{padding:0 1em}.hybriddd-option label{user-select:none;-ms-user-select:none;-moz-user-select:none;-webkit-user-select:none;display:block}.hybriddd-option label>*{display:inline-block}.hybridddcb{width:0;height:0;vertical-align:middle;display:inline-block;visibility:hidden}.hybrid-dropdown.show-cb .hybridddcb{visibility:visible;width:16px;height:16px;border:solid 1px;margin:0 3px 3px 2px}.hybriddd-option>label>input{opacity:0;width:0;height:0}.hybridddcb::before{content:'';display:block;width:10px;height:10px;margin:2px auto}.hybriddd-option input[type="radio"] .hybridddcb{border-radius:50%}.hybriddd-option input:checked .hybridddcb::before{border:solid 3px;padding:1px}.hybriddd-option.active>label{background:#0466ff;color:#fff}input:checked+.hybridddcb::before{background:#fff}.hybriddd-option.partial>label .hybridddcb::before{background:#a5a5a5} +.hybrid-dropdown{position:relative;width:max-content;min-width:30px;min-height:2.5em;display:inline-block;vertical-align:baseline;font-size:1em;border:1px solid #6f6f6f;border-radius:.25em;padding:0 30px 0 18px;cursor:pointer;background:inherit}select.hybridddised{visibility:hidden!important;width:0!important;height:0!important}.hybrid-dropdown:focus{box-shadow:1px 1px 3px}.hybriddd-option::before,.hybriddd-group::before{display:none!important;content:none;margin:0;padding:0}.hybridddised:disabled+.hybrid-dropdown{background:#ccc;color:grey}.hybrid-dropdown .hybriddd-wrapper{overflow:hidden;z-index:7777;position:absolute;left:0;max-height:34vh;min-width:max-content;display:none;background-color:inherit}.hybrid-dropdown ul.hybriddd-options{border:1px solid #6f6f6f;border-radius:.25em;list-style:none!important;margin:0!important;padding:0!important;overflow-y:auto;scrollbar-width:thin;height:100%;background-color:inherit;overscroll-behavior:contain}.hybrid-dropdown.active>.hybriddd-wrapper{display:block}.hybrid-dropdown *,.hybrid-dropdown .hybriddd-options .hybriddd-option,.hybrid-dropdown .hybriddd-options .hybriddd-option ul,.hybrid-dropdown .hybriddd-options .hybriddd-group,.hybrid-dropdown .hybriddd-options .hybriddd-group ul{box-sizing:border-box;cursor:default;margin:0}.hybriddd-selected{position:relative;width:max-content;height:100%;padding:.4em 3px;cursor:pointer;min-width:100%;max-width:inherit;display:inline-block;z-index:7}.hybriddd-selected::after{border-bottom:2px solid #90a1b5;border-right:2px solid #90a1b5;content:'';display:block;height:5px;margin-top:-4px;pointer-events:none;position:absolute;right:-12px;top:50%;-webkit-transform-origin:66% 66%;-ms-transform-origin:66% 66%;transform-origin:66% 66%;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);-webkit-transition:all 0.15s ease-in-out;transition:all 0.15s ease-in-out;width:5px}.hybriddd-landscape .hybriddd-options>.hybriddd-option,.hybriddd-landscape .hybriddd-options>.hybriddd-group>ul>.hybriddd-option{display:inline-block}.hybriddd-landscape .hybriddd-options .hybridddl:dir(rtl){float:right}.hybriddd-landscape .hybriddd-options .hybriddd-group{clear:both;border-top:none;padding:0}.hybriddd-landscape .hybriddd-option>label{padding:.1em}ul.hybriddd-options::-webkit-scrollbar{width:6px}ul.hybriddd-options::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px rgb(1 1 1 / 35%)}.hybriddd-options ul{list-style:none;padding:0}.hybriddd-group>span{font-weight:700}.hybriddd-l0{padding:0 .5em}.hybriddd-l1{padding:0 1em 0 1em}.hybriddd-l2{padding:0 1em 0 1.5em}.hybriddd-l3{padding:0 1em 0 2em}.hybriddd-l4{padding:0 1em 0 2.5em}.hybriddd-l5{padding:0 1em 0 3em}.hybriddd-group>span{padding:0 .5em}.hybriddd-options ul .hybriddd-group>span{padding:0 1em}.hybriddd-option label{user-select:none;-ms-user-select:none;-moz-user-select:none;-webkit-user-select:none;display:block}.hybriddd-option label>*{display:inline-block}.hybridddcb{width:0;height:0;vertical-align:middle;display:inline-block;visibility:hidden}.hybrid-dropdown.show-cb .hybridddcb{visibility:visible;width:16px;height:16px;border:solid 1px;margin:0 3px 3px 2px}.hybriddd-option>label>input{opacity:0;width:0;height:0}.hybridddcb::before{content:'';display:block;width:10px;height:10px;margin:2px auto}.hybriddd-option input[type="radio"] .hybridddcb{border-radius:50%}.hybriddd-option input:checked .hybridddcb::before{border:solid 3px;padding:1px}.hybriddd-option.active>label{background:#0466ff;color:#fff}input:checked+.hybridddcb::before{background:#fff}.hybriddd-option.partial>label .hybridddcb::before{background:#a5a5a5}