Skip to content

Commit c1a6634

Browse files
zhurczhurc
committed
尝试修复在线编辑及范例页侧边栏不能滚动问题
1 parent 233b66a commit c1a6634

File tree

5 files changed

+163
-20
lines changed

5 files changed

+163
-20
lines changed

‎examples/css/editor.css‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -12,18 +12,18 @@ html, body, .wrapper {
1212
}
1313

1414
.edit-container {
15-
min-height:52px;
15+
min-height: 52px;
1616
background-color: #f9f9f9;
1717
position: absolute;
18-
top:0;
19-
bottom:0;
20-
left:0;
21-
right:0;
18+
top: 0;
19+
bottom: 0;
20+
left: 0;
21+
right: 0;
2222
margin-top: 52px;
2323
}
2424

2525
.edit-container section.content {
26-
min-height:100%;
26+
min-height: 100%;
2727
width: 100%;
2828
padding: 0;
2929
position: absolute;
@@ -117,11 +117,11 @@ html, body, .wrapper {
117117
}
118118
}
119119

120-
::-webkit-scrollbar {
120+
.ace_scrollbar::-webkit-scrollbar {
121121
width: 8px;
122122
}
123123

124-
::-webkit-scrollbar-thumb {
124+
.ace_scrollbar::-webkit-scrollbar-thumb {
125125
border-radius: 12px;
126126
background: #e7e7e7;
127127
-webkit-box-shadow: inset 0 0 6px #d1cfcf;

‎examples/css/sideBar.css‎

Lines changed: 82 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,14 @@
1+
12
.main-sidebar {
23
position: fixed;
4+
z-index: 900;
5+
height: 100%;
6+
}
7+
8+
.sidebar {
9+
height: 100% !important;
10+
overflow: hidden;
11+
overflow-y: auto;
312
}
413

514
.menuTitle a.active {
@@ -18,7 +27,8 @@
1827
border-left: 3px solid rgba(0, 0, 0, 0.1);
1928
}
2029

21-
.skin-blue .sidebar .second-menu, .skin-blue .sidebar .third-menu {
30+
.skin-blue .sidebar .second-menu,
31+
.skin-blue .sidebar .third-menu {
2232
padding-left: 0;
2333
}
2434

@@ -30,11 +40,33 @@
3040
color: #000000;
3141
}
3242

43+
/*侧边栏滚动设置 start*/
44+
#sidebar-menu > li:hover .sidebar-title-bar {
45+
position: static;
46+
}
47+
48+
.sidebar-collapse #sidebar-menu > li:hover .sidebar-title-bar {
49+
position: fixed;
50+
}
51+
52+
#sidebar-menu > li:hover > ul {
53+
position: static;
54+
height: auto;
55+
}
56+
57+
.sidebar-collapse #sidebar-menu > li:hover > ul {
58+
position: fixed;
59+
overflow-y: auto;
60+
}
61+
62+
/*侧边栏滚动设置 end*/
63+
3364
.skin-blue .treeview-menu li > a {
3465
border-left: 3px solid #3c8dbc;
3566
}
3667

37-
.skin-blue .treeview-menu li > a:hover, .skin-blue .treeview-menu li.active > a {
68+
.skin-blue .treeview-menu li > a:hover,
69+
.skin-blue .treeview-menu li.active > a {
3870
background-color: rgba(0, 0, 0, 0.1);
3971
border-left-color: rgba(0, 0, 0, 0.3);
4072
}
@@ -53,8 +85,17 @@
5385
background: #3c8dbc;
5486
}
5587

88+
.sidebar-title-bar .fa-angle-left,
89+
.sidebar-title-bar .pull-right-container > .fa-angle-lef {
90+
width: auto;
91+
height: auto;
92+
padding: 0;
93+
margin-right: 10px;
94+
}
95+
5696
/*侧边栏收起后向右展开的边框宽度*/
57-
.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > a > span:not(.pull-right), .sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > .treeview-menu {
97+
.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > a > span:not(.pull-right),
98+
.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > .treeview-menu {
5899
border-radius: 0;
59100
width: 220px;
60101
}
@@ -70,12 +111,14 @@
70111
border-radius: 0;
71112
}
72113

73-
.skin-blue .sidebar-menu > li:hover > a, .skin-blue .sidebar-menu > li.active > a {
114+
.skin-blue .sidebar-menu > li:hover > a,
115+
.skin-blue .sidebar-menu > li.active > a {
74116
color: #3c8dbc;
75117
background: #3375A1;
76118
}
77119

78-
.skin-blue .treeview-menu > li.active > a, .skin-blue .treeview-menu > li > a:hover {
120+
.skin-blue .treeview-menu > li.active > a,
121+
.skin-blue .treeview-menu > li > a:hover {
79122
color: #000000;
80123
}
81124

@@ -102,3 +145,37 @@
102145
.main-sidebar .pull-right {
103146
color: #FFFFFF
104147
}
148+
149+
/*侧边栏滚动条*/
150+
.sidebar {
151+
-ms-scroll-chaining: chained;
152+
-ms-overflow-style: none;
153+
-ms-content-zooming: zoom;
154+
-ms-scroll-rails: none;
155+
-ms-content-zoom-limit-min: 100%;
156+
-ms-content-zoom-limit-max: 500%;
157+
-ms-scroll-snap-type: proximity;
158+
-ms-scroll-snap-points-x: snapList(100%, 200%, 300%, 400%, 500%);
159+
}
160+
161+
.sidebar::-webkit-scrollbar {
162+
width: 0;
163+
background-color: rgba(0, 0, 0, 0);
164+
}
165+
166+
/*侧边栏二级菜单滚动条*/
167+
.scroll-list {
168+
-ms-scroll-chaining: chained;
169+
-ms-overflow-style: none;
170+
-ms-content-zooming: zoom;
171+
-ms-scroll-rails: none;
172+
-ms-content-zoom-limit-min: 100%;
173+
-ms-content-zoom-limit-max: 500%;
174+
-ms-scroll-snap-type: proximity;
175+
-ms-scroll-snap-points-x: snapList(100%, 200%, 300%, 400%, 500%);
176+
}
177+
178+
.scroll-list::-webkit-scrollbar {
179+
width: 0;
180+
background-color: rgba(0, 0, 0, 0);
181+
}

‎examples/js/editor.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
$(document).ready(function () {
22
initPage();
33
bindEvents();
4+
sidebarScrollFix();
45
});
56

67
var aceEditor;
@@ -26,6 +27,7 @@ function screenResize() {
2627
mapHeight();
2728
};
2829
}
30+
2931
//初始化编辑器
3032
function initCodeEditor() {
3133
if (!aceEditor) {

‎examples/js/example.js‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
$(document).ready(function () {
22
initPage();
3-
43
bindEvents();
54
});
65
var exConfig = exampleConfig,
@@ -17,8 +16,10 @@ function initPage() {
1716
}
1817
resizeCharts();
1918
initSelect();
19+
sidebarScrollFix();
2020
}
2121

22+
2223
//初始化页面第一次加载
2324
function initSelect() {
2425
var hash = window.location.hash;
@@ -135,8 +136,8 @@ function scroll() {
135136

136137
}
137138

138-
if (ele&&ele.offset()) {
139-
$("body").animate({scrollTop: ele.offset().top - 50}, 0);
139+
if (ele && ele.offset()) {
140+
$("body").animate({scrollTop: ele.offset().top - 50}, 0);
140141
}
141142
}
142143

@@ -148,7 +149,7 @@ function bindEvents() {
148149
if ($('ul.sidebar-menu>li#firstMenuiManager').find('ul').length == 0) {
149150
if ($('ul.sidebar-menu>li#firstMenuiManager').click(function () {
150151
$('ul#sidebar-menu>li>ul').slideUp(500);
151-
}));
152+
})) ;
152153
}
153154
//一级菜单跳转
154155
child.parent('ul').siblings('a').click(function (evt) {

‎examples/js/sidebar.js‎

Lines changed: 66 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,66 @@ function initSideBar() {
99
}
1010
}
1111

12+
//侧边栏滚动支持
13+
function sidebarScrollFix() {
14+
$('ul#sidebar-menu>li').hover(function (evt) {
15+
16+
if (!$('body').hasClass('sidebar-collapse')) {
17+
return;
18+
}
19+
20+
//调整一级菜单li下标题的布局位置至右侧
21+
var $titleBar = $(this).children('a').children('.sidebar-title-bar');
22+
$titleBar.css({
23+
"top": ($(this).offset().top - $(window).scrollTop()) + "px",
24+
//fix由于侧边栏滚动条宽度引起的减少的宽度
25+
"width": "223px"
26+
});
27+
28+
//如果底部空间不够，动态增加侧边栏高度
29+
var visibleOffsetTop = $(this).offset().top - $(window).scrollTop();
30+
var offsetBottom = $('.sidebar-menu').height() - visibleOffsetTop;
31+
var requireVisibleHeight = $(this).height() + $(this).children('ul').height();
32+
if (offsetBottom <= requireVisibleHeight) {
33+
$('.sidebar-menu').css({
34+
"height": (requireVisibleHeight + $(window).height()) + "px"
35+
})
36+
}
37+
38+
//调整一级菜单li下子列表的布局位置至右侧
39+
var offsetTop = visibleOffsetTop + $(this).height();
40+
$(this).children('ul').css({
41+
"top": offsetTop + "px"
42+
});
43+
44+
//fix小尺寸屏幕下二级菜单高度高于窗口高度时显示不全的情况
45+
var $activeList = $(this).children('ul');
46+
var activeListOffsetBottom = $(window).height() - visibleOffsetTop - $(this).height();
47+
var requireActiveListHeight = $activeList.height();
48+
if (activeListOffsetBottom < requireActiveListHeight) {
49+
$activeList.css({"height": activeListOffsetBottom});
50+
//滚动条样式
51+
$activeList.addClass('scroll-list');
52+
}
53+
54+
}, function (evt) {
55+
if (!$('body').hasClass('sidebar-collapse')) {
56+
return;
57+
}
58+
//滚动条
59+
$(this).children('ul').removeClass('scroll-list');
60+
//恢复原来的高度
61+
$(this).children('ul').css({"height": "auto"});
62+
});
63+
$('.main-sidebar').on('scroll', function (evt) {
64+
evt.stopPropagation();
65+
});
66+
67+
$(window).on('resize', function () {
68+
$('.sidebar-menu').css({"height": "100%"})
69+
})
70+
}
71+
1272
//创建菜单项
1373
function createSideBarMenuItem(id, config, containAll) {
1474
if (!config) {
@@ -18,7 +78,6 @@ function createSideBarMenuItem(id, config, containAll) {
1878
var li = $("<li id='iclient_" + id + "' class='treeview '></li>");
1979

2080
if (config.content) {
21-
2281
createSideBarMenuTitle(id, config.name, true).appendTo(li);
2382
createSideBarSecondMenu(config.content, id).appendTo(li);
2483
} else {
@@ -67,10 +126,14 @@ function createSideBarMenuTitle(id, title, collapse) {
67126
icon = "<i class='fa " + iconName + " iconName'></i>"
68127
}
69128

70-
var div = $("<a href='#" + id + "' >" + icon + "<span class='firstMenuTitle'>" + title + "</span></a>");
129+
var div = $("<a href='#" + id + "' >" + icon + "</a>");
130+
var titleBar = $("<span class='sidebar-title-bar'></span>");
131+
var firstMenuTitle = $("<span class='firstMenuTitle'>" + title + "</span>");
132+
titleBar.append(firstMenuTitle);
71133
if (collapse) {
72-
div.append(createCollapsedIcon());
134+
titleBar.append(createCollapsedIcon());
73135
}
136+
div.append(titleBar);
74137
return div;
75138
}
76139

0 commit comments

Comments
 (0)