SCROLLBAR - прокрутка страниц - общие вопросы

travis · June 6, 2006

как сделать скролбар, который двигается вверх-вниз в тон фону сайта или наоборот, сделать ярче него. подскажите ламеру

Vlad · June 7, 2006

Вот тебе код, сохрани его к себе на компьютер, запусти html-файл и подбирай параметры.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<body>
<style>
.sample {}
</style>

  <p>Задайте необходимые цвета и нажмите кнопку «Показать, как будет выглядеть». 
	Цвета можно указывать в шестнадцатеричном виде, по имени или нажать на кнопку 
	<img src="/images/color.gif" width="19" height="19">, чтобы выбрать цвет простым 
	нажатием кнопки мыши.</p>
  <p> <b>Способ работает только для браузера Internet Explorer 5.5. и выше!</b></p>
<style>
#colorPanel {
background: #ffffee;
border: 1px solid black;
padding: 5px;
width: 210px;
position: absolute;
display: none
}

#picker {
float: right;
border: 1px solid black;
width: 75px
}

.colorTable {
width: 100%;

}
.colorTable TD {
border: 1px solid black;
width: 13%;
font-size: 9px
}


#infocolor {
color: red;
padding: 5px;
font-size: 14px;
float: left;
width: 120px;
}

.colorTable TD.selcolor {
border: 1px solid white;
}
</style>

<script language="JavaScript">

flag = 0;

function eraseR() {

	 ss = document.styleSheets.length - 1;
	 if (flag == 1) document.styleSheets[ss].removeRule(1);
	 flag = 0;
}


function viewResult(f) {

dataForm(f);

   if (document.all) {
	 ss = document.styleSheets.length - 1;

	 if(flag == 1) document.styleSheets[ss].removeRule(1);
	 flag = 1;

	document.styleSheets[ss].addRule(".sample", "scrollbar-face-color:" + face_color + ";" +
	"scrollbar-track-color:" + track_color + ";" +
	"scrollbar-darkshadow-color:" + dark_shadow_color + ";" +
	"scrollbar-shadow-color:" + shadow_color + ";" +
	"scrollbar-highlight-color:" + highlight_color + ";" +
	"scrollbar-base-color:" + base_color + ";" +
	"scrollbar-3dlight-color:" + td_light_color + ";" +
	"background-color:" + bgcolor + ";" +
	"scrollbar-arrow-color:" + arrow_color + ";", 1);

   }
}


function createCode(f) {

  line = scriptTag(f);
  f.codes.value=line;
}


function dataForm(f) {

  face_color = f.face_color.value;
  track_color = f.track_color.value;
  dark_shadow_color = f.dark_shadow_color.value;
  shadow_color = f.shadow_color.value;
  highlight_color = f.highlight_color.value;
  base_color = f.base_color.value;
  td_light_color = f.td_light_color.value;
  arrow_color = f.arrow_color.value;
  bgcolor = f.bgcolor.value;

}


function scriptTag(f) {

dataForm(f);

  line = "<style type="text/css">n"+
	 "body {n";

  if(f.face_color.value && f.face_color.value != "#") line += "  scrollbar-face-color: "+ face_color +";n";
  if(f.track_color.value && f.track_color.value != "#") line += "  scrollbar-track-color: "+ track_color +";n";
  if(f.dark_shadow_color.value && f.dark_shadow_color.value != "#") line += "  scrollbar-darkshadow-color: "+ dark_shadow_color +";n";
  if(f.shadow_color.value && f.shadow_color.value != "#") line += "  scrollbar-shadow-color: "+ shadow_color +";n";
  if(f.highlight_color.value && f.highlight_color.value != "#") line += "  scrollbar-highlight-color: "+ highlight_color +";n";
  if(f.base_color.value && f.base_color.value != "#") line += "  scrollbar-base-color: "+ base_color +";n";
  if(f.td_light_color.value && f.td_light_color.value != "#") line += "  scrollbar-3dlight-color: "+ td_light_color +";n";
  if(f.arrow_color.value && f.arrow_color.value != "#") line += "  scrollbar-arrow-color: "+ arrow_color +";n";
  if(f.bgcolor.value && f.bgcolor.value != "#") line += "  background-color: "+ bgcolor +";n";

  line += "}n";
  line += "</style>";

  return line;
}

</script>


<form name=scroll>
  <table width="90%" border="0" align="center">
	<tr> 
	  <td width="70%"> 
  <div id=colorPanel>
  <div id=infocolor> </div><div id=picker>&nbsp</div><br style="clear: both">
</div>

		<table width="100%" border="0" cellspacing="4" cellpadding="0" align="center" bgcolor="#F6F6F0">
		  <tr> 
			<td align="right">Цвет ползунка и кнопок</td>
			<td> 
			  <table border="0" cellspacing="0">
				<tr> 
				  <td> 
					<input type="text" name="face_color" size="7" maxlength="20" value="">
				  </td>
				  <td><a href="java script:showColor('face_color')"><img src="/images/color.gif" width="19" height="19" border="0" alt="Выбор цвета из палитры"></a></td>
				</tr>
			  </table>
			</td>
		  </tr>
		  <tr> 
			<td colspan="2" height=1 bgcolor=white><img src=/images/1x1.gif width=1 height=1></td>
		  </tr>
		  <tr> 
			<td align="right">Цвет дорожки ползунка</td>
			<td> 
			  <table border="0" cellspacing="0">
				<tr> 
				  <td> 
					<input type="text" name="track_color" size="7" maxlength="20" value="">
				  </td>
				  <td><a href="java script:showColor('track_color')"><img src="/images/color.gif" width="19" height="19" border="0" alt="Выбор цвета из палитры"></a></td>
				</tr>
			  </table>
			</td>
		  </tr>
		  <tr> 
			<td colspan="2" height=1 bgcolor=white><img src=/images/1x1.gif width=1 height=1></td>
		  </tr>
		  <tr> 
			<td align="right">Цвет тени ползунка и кнопок</td>
			<td> 
			  <table border="0" cellspacing="0">
				<tr> 
				  <td> 
					<input type="text" name="shadow_color" size="7" maxlength="20" value="">
				  </td>
				  <td><a href="java script:showColor('shadow_color')"><img src="/images/color.gif" width="19" height="19" border="0" alt="Выбор цвета из палитры"></a></td>
				</tr>
			  </table>
			</td>
		  </tr>
		  <tr> 
			<td colspan="2" height=1 bgcolor=white><img src=/images/1x1.gif width=1 height=1></td>
		  </tr>
		  <tr> 
			<td align="right">Цвет темной тени ползунка и кнопок</td>
			<td> 
			  <table border="0" cellspacing="0">
				<tr> 
				  <td> 
					<input type="text" name="dark_shadow_color" size="7" maxlength="20" value="">
				  </td>
				  <td><a href="java script:showColor('dark_shadow_color')"><img src="/images/color.gif" width="19" height="19" border="0" alt="Выбор цвета из палитры"></a></td>
				</tr>
			  </table>
			</td>
		  </tr>
		  <tr> 
			<td colspan="2" height=1 bgcolor=white><img src=/images/1x1.gif width=1 height=1></td>
		  </tr>
		  <tr> 
			<td align="right">Цвет подсветки, создающий эффект объ?мности</td>
			<td> 
			  <table border="0" cellspacing="0">
				<tr> 
				  <td> 
					<input type="text" name="highlight_color" size="7" maxlength="20" value="">
				  </td>
				  <td><a href="java script:showColor('highlight_color')"><img src="/images/color.gif" width="19" height="19" border="0" alt="Выбор цвета из палитры"></a></td>
				</tr>
			  </table>
			</td>
		  </tr>
		  <tr> 
			<td colspan="2" height=1 bgcolor=white><img src=/images/1x1.gif width=1 height=1></td>
		  </tr>
		  <tr> 
			<td align="right">Цвет основных элементов ползунка: ползунка, 
			  кнопок со стрелками, дорожки для ползунка</td>
			<td> 
			  <table border="0" cellspacing="0">
				<tr> 
				  <td> 
					<input type="text" name="base_color" size="7" maxlength="20" value="">
				  </td>
				  <td><a href="java script:showColor('base_color')"><img src="/images/color.gif" width="19" height="19" border="0" alt="Выбор цвета из палитры"></a></td>
				</tr>
			  </table>
			</td>
		  </tr>
		  <tr> 
			<td colspan="2" height=1 bgcolor=white><img src=/images/1x1.gif width=1 height=1></td>
		  </tr>
		  <tr> 
			<td align="right">Цвет верхней и левой части ползунка 
			  и кнопок</td>
			<td> 
			  <table border="0" cellspacing="0">
				<tr> 
				  <td> 
					<input type="text" name="td_light_color" size="7" maxlength="20" value="">
				  </td>
				  <td><a href="java script:showColor('td_light_color')"><img src="/images/color.gif" width="19" height="19" border="0" alt="Выбор цвета из палитры"></a></td>
				</tr>
			  </table>
			</td>
		  </tr>
		  <tr> 
			<td colspan="2" height=1 bgcolor=white><img src=/images/1x1.gif width=1 height=1></td>
		  </tr>
		  <tr> 
			<td align="right">Цвет стрелок на кнопках</td>
			<td> 
			  <table border="0" cellspacing="0">
				<tr> 
				  <td> 
					<input type="text" name="arrow_color" size="7" maxlength="20" value="">
				  </td>
				  <td><a href="java script:showColor('arrow_color')"><img src="/images/color.gif" width="19" height="19" alt="Выбор цвета из палитры" border="0" ></a></td>
				</tr>
			  </table>
			</td>
		  </tr>
		  <tr> 
			<td align="right">Цвет фона веб-страницы</td>
			<td> 
			  <table border="0" cellspacing="0">
				<tr> 
				  <td> 
					<input type="text" name="bgcolor" size="7" maxlength="20" value="">
				  </td>
				  <td><a href="java script:showColor('bgcolor')"><img src="/images/color.gif" width="19" height="19" alt="Выбор цвета из палитры" border="0" ></a></td>
				</tr>
			  </table>
			</td>
		  </tr>
		</table>
	  </td>
	  <td width="30%" align="center" bgcolor="#f6f6f0"> 
		<textarea  cols="17" rows="8" class="sample">Неактивная полоса прокрутки</textarea>


		<textarea name="textarea" cols="17" rows="8" class="sample">Активная полоса прокрутки








		</textarea>
	  </td>
	</tr>
	<tr bgcolor="#e0e0e0"> 
	  <td colspan="2" align="center" height="35"> 
		<input type="button" name="ccode" value="Сформировать код" onClick="createCode(this.form)">
		<input type="reset" name="default" value="Очистить" onClick="eraseR()">
		<input type="button" name="view" value="Показать, как будет выглядеть" onClick="viewResult(this.form)">
	  </td>
	</tr>
  </table>
  <p align=center> 
	<textarea name="codes" cols="50" rows="10">Нет кода. Нажмите на кнопку "Сформировать код" для его создания.</textarea>
</form>

</body>
</html>

iipo · May 30, 2007

А, как на счет того, чтоб он состоял из изображений?

Emm · May 30, 2007

scrollbar-track-image: url(img/picture.gif); - по идее :/

imper · July 5, 2012

для этого есть специальный простой плагин очень легко настраиваемый http://jscrollpane.kelvinluck.com/ правда он пендосовский но гугл тебе в помощь, нажимай на демки и смотри =-)

Killerblade · June 11, 2013

Использую jScrollPane - v2.0.0. С обычным jQuery Javascript Library v1.8.3 не работает прокрутка мышью. Когда же подключаю jQuery 1.2.6 - New Wave Javascript то все работает норм.

Вопрос, почему не работает прокрутка мышью с новыми версиями JQ ?

Sign In

SCROLLBAR - прокрутка страниц - общие вопросы

Question

travis

Link to comment

Share on other sites

5 answers to this question

Recommended Posts

Vlad

Link to comment

Share on other sites

iipo

Link to comment

Share on other sites

Emm

Link to comment

Share on other sites

imper

Link to comment

Share on other sites

Killerblade

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information