ReSQL.ru
     
powered by simpleCommunicator - 2.0.51     © 2025 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / как изменить стандартный скроллбар на свой
2 сообщений из 2, страница 1 из 1
как изменить стандартный скроллбар на свой
    #34352686
Фотография geo_life
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
geo_life
Участник
предположим у меня есть div
Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
<div id="oDiv2" style=" width: 100px; height: 100px;  overflow-x: hidden; overflow-y: auto">
            ajhlskdjafhlksdjfhalksdjh<br>
            ajhlskdjafhlksdjfhalksdjh<br>
            ajhlskdjafhlksdjfhalksdjh<br>
            ajhlskdjafhlksdjfhalksdjh<br>
            ajhlskdjafhlksdjfhalksdjh<br>
            ajhlskdjafhlksdjfhalksdjh<br>
            ajhlskdjafhlksdjfhalksdjh<br>
        </div>
, в нем какой то текст , если текста много то в div-е появятся скроллбар, скажите как мне программно определить overflow - т.е. выходит ли внутренний текст за пределы div-а (т.е. у него появляется scrollbar). Я хочу вместо скролл бара поставить две кнопки-img (скролл-кнопкам) и если внутреннй текст выходит за overflow то показывать эти кнопки, если нет - то прятать.
...
Рейтинг: 0 / 0
24.02.2007, 12:37
| Ответить | Цитировать | Написать  
как изменить стандартный скроллбар на свой
    #34356847
Фотография geo_life
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
geo_life
Участник
переписал свой, вот исходники, работает только под IE:
JavaScript
Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
/* VScrollButton */
function SetVScrollBtns(strContainer, strVScrollBtnUp, strVScrollBtnDown)
{
    var Container  = document.getElementById(strContainer);
    var VScrollBtnUp  = document.getElementById(strVScrollBtnUp);
    var VScrollBtnDown  = document.getElementById(strVScrollBtnDown);
    if (Container && VScrollBtnUp && VScrollBtnDown) 
    {
        if (Container.scrollHeight > Container.clientHeight)
        {
            VScrollBtnUp.style.visibility = 'visible';
            VScrollBtnDown.style.visibility = 'visible';
        }
        else
        {
            VScrollBtnUp.style.visibility = 'hidden';
            VScrollBtnDown.style.visibility = 'hidden';
        }

    }
}    

function DoBtnScroll(obj, direction)
{
  var TextComtainer = document.getElementById(obj);
  if (TextComtainer)
  {
      if (direction=="up")
      { 
         TextComtainer.scrollTop = TextComtainer.scrollTop - TextComtainer.clientHeight *  0 . 8 ;
      } 
      else
      { 
         TextComtainer.scrollTop = TextComtainer.scrollTop + TextComtainer.clientHeight *  0 . 8 ;
      }
  }
}
/* End VScrollButton */


/* VScrollBar */
function VScrollBar(strContainer, strVScrollBar)
{
    this.Container  = document.getElementById(strContainer);
    this.ScrollBar  = document.getElementById(strVScrollBar);
    this.ScrollBarTop = null;
    this.ScrollBarCenter = null;
    this.ScrollingCenter = null;
    this.ScrollBarBottom = null;
    if (this.Container && this.ScrollBar) 
    {
        this.Container.style.overflow = 'hidden';
        this.Container.style.display = 'inline';
        for (var i= 0 ; i < this.ScrollBar.childNodes.length; i++)
        {
            if (this.ScrollBar.childNodes.item(i).tagName == "DIV")
            {
                if (!this.ScrollBarTop)
                {
                    this.ScrollBarTop = this.ScrollBar.childNodes.item(i);
                }
                else if (!this.ScrollBarCenter)
                {
                    this.ScrollBarCenter = this.ScrollBar.childNodes.item(i);                
                }
                else if (!this.ScrollBarBottom)
                {
                    this.ScrollBarBottom = this.ScrollBar.childNodes.item(i);                
                }
            }
        }
        for (var i= 0 ; i < this.ScrollBarCenter.childNodes.length; i++)
        {
            if (this.ScrollBarCenter.childNodes.item(i).tagName == "DIV")
            {
                if (!this.ScrollingCenter)
                {
                    this.ScrollingCenter  = this.ScrollBarCenter.childNodes.item(i);
                }
            }
        }
        if (this.Container.scrollHeight > this.Container.clientHeight)
        {
            this.ScrollBarCenter.style.height = this.Container.clientHeight - this.ScrollBarTop.offsetHeight *  2 ;
            this.ScrollingCenter.style.height = this.ScrollBarCenter.clientHeight  * this.Container.clientHeight / this.Container.scrollHeight;
            this.ScrollBar.style.visibility = 'visible';
        }
        else
        {
            this.ScrollBar.style.visibility = 'hidden';    
        }
        
       /* this.ScrollBarBottom.onclick = 
        function () 
        { 
            alert(this.Container.clientHeight);
        };
        */
    }
    
}
function DoScroll(obj, direction)
{
  var scrollbar = eval(obj);
  var objContainer = scrollbar.Container;
  var objScrollBarCenter = scrollbar.ScrollBarCenter;
  var objScrollingCenter = scrollbar.ScrollingCenter;
  
  if (direction=="up")
  { 
     objContainer.scrollTop = objContainer.scrollTop - objContainer.clientHeight *  0 . 8 ;
  } 
  else
  { 
     objContainer.scrollTop = objContainer.scrollTop + objContainer.clientHeight *  0 . 8 ;
  }
  var MaxScroll = objContainer.scrollHeight - objContainer.clientHeight;
  objScrollingCenter.style.top = (objScrollBarCenter.offsetHeight - objScrollingCenter.offsetHeight) / MaxScroll * objContainer.scrollTop ;
  
}
/* End VScrollBar */

HTML:
Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
<div class="scroll_textscroll_container">
<div id="ContainerDiv" class="scroll_text_container">
            ajhlskdjafhlksdjfhalksdjh<br>
            ajhlskdjafhlksdjfhalksdjh<br>
            ajhlskdjafhlksdjfhalksdjh<br>
            ajhlskdjafhlksdjfhalksdjh<br>
            ajhlskdjafhlksdjfhalksdjh<br>
            ajhlskdjafhlksdjfhalksdjh<br>
            ajhlskdjafhlksdjfhalksdjh<br>
            ajhlskdjafhlksdjfhalksdjh<br>
            ajhlskdjafhlksdjfhalksdjh<br>
            ajhlskdjafhlksdjfhalksdjh<br>
            ajhlskdjafhlksdjfhalksdjh<br>
            ajhlskdjafhlksdjfhalksdjh<br>
            ajhlskdjafhlksdjfhalksdjh<br>
            ajhlskdjafhlksdjfhalksdjh<br>

</div>
           <!-- VScrollBar --> 
            <script language="javascript" type="text/javascript">
                onload = init;
                function init()
                {
                    ScrollBar1 = new VScrollBar('ContainerDiv', 'VScrollBar');
                }
            </script>
            <div id="VScrollBar" class="scroll_bar">
                <div id="VScrollTop" class="scroll_divs scroll_top_div">
                    <input id="Button9" type="button" class="button_key scroll_buttons scroll_top_button" value=" UP "
                        onclick="javascript:DoScroll('ScrollBar1', 'up');" />
                </div>
                <div id="VScrollCenter" class="v_scroll_center_div">
                    <div id="VScrollingCenter" class="scroll_divs v_scrolling_center_div">
                        <input id="Button12" type="button" disabled="disabled" class="button_key scroll_buttons v_scrolling_center_button"
                            value="  " />
                    </div>
                </div>
                <div id="VScrollBottom" class="scroll_divs scroll_bottom_div">
                    <input id="Button11" name="Button11" type="button" class="button_key scroll_buttons scroll_bottom_button" value="DOWN"
                        onclick="javascript:DoScroll('ScrollBar1','');" />
                </div>
            </div>
           <!-- End VScrollBar --> 
</div>
CSS:
Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
/* scroll_bar */
.scroll_bar
{
	height:  1 %; 
   width:  1 %; 
	display: inline; 
	background-color: #CAD9F0;
	margin-bottom: 1px;
	position: absolute;
	top: 0px;
	right: -66px;
	visibility: hidden;
	/* visibility: hidden !important; */
}
.scroll_divs
{
   Height:50px;
   width: 66px;	
}
.scroll_buttons
{
	background-repeat: no-repeat;
   Height: 100 %;
   width:  100 %;	
	margin:  0 ;
	padding:  0 ;
	font: bold 12pt Verdana, Geneva, Arial, Helvetica, sans-serif;

	border: 2px outset #b9c9ef;
	PADDING: 1px; 
	MARGIN: 0px; 
	BACKGROUND-COLOR: #D5E2F3;
	FONT-FAMILY: Verdana; 

}
.scroll_top_div
{
}
.v_scroll_center_div
{
	Height:42px;
}
.v_scrolling_center_div
{
	position: relative;
	top:  0 ;
	left:  0 ;
   Height:33px;
}
.scroll_bottom_div
{
}
.scroll_top_button
{
	/* background-image: url(../images/ScrollTop_1024_768.jpg); */
}
.v_scrolling_center_button
{
	/*	background: url(../images/ScrollCenter.jpg) repeat; */
}
.scroll_bottom_button
{
	/* background-image: url(../images/ScrollBottom_1024_768.jpg); */
}
/* end scroll_bar */


/* scroll_textscroll_containers */
.scroll_textscroll_container
{
	position: relative;
	width:  1 %;
}
.scroll_text_container
{
	overflow:hidden;
}
/* scroll_textscroll_containers */
...
Рейтинг: 0 / 0
27.02.2007, 11:11
| Ответить | Цитировать | Написать  
2 сообщений из 2, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / как изменить стандартный скроллбар на свой
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение
NoSQL.ru       Новости, Чат       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&tid=1458717]:
 0ms
get settings:
 8ms
get forum list:
 13ms
check forum access:
 4ms
check topic access:
 4ms
track hit:
 132ms
get topic data:
 14ms
get forum data:
 3ms
get page messages:
 37ms
get tp. blocked users:
 2ms
others: 262ms
total:  479ms
созд. / загр.: 479ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]