JSFiddle - React, Tailwind, and code Playground

HTML

<html>
	<head>
		<title>Slider verticale</title>
		<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" type="text/css" media="all" />
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
		<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>
		<script src="jquery.mousewheel.min.js" type="text/javascript"></script>

	</head>
	<body>
		<div id="content">
			<div id="right">
				<div class="slider-vertical"></div>
			</div>
			<div id="center">
				<div class="maschera">
					<div class="contenuti">
						<div class="news">1 riga</div>
                        <div class="news">2 riga</div>
                        <div class="news">3 riga</div>
                        <div class="news">4 riga</div>
                        <div class="news">5 riga</div>
                        <div class="news">6 riga</div>
                        <div class="news">7 riga</div>
                        <div class="news">8 riga</div>
                        <div class="news">9 riga</div>
                        <div class="news">10 riga</div>

					</div>
				</div>
			</div>
			<div class="clear"></div>
		</div>
        
        
        
        <div id="content">
			<div id="right">
				<div class="slider-vertical"></div>
			</div>
			<div id="center">
				<div class="maschera">
					<div class="contenuti">
						<div class="news">1 riga</div>
                        <div class="news">2 riga</div>
                        <div class="news">3 riga</div>
                        <div class="news">4 riga</div>
                        <div class="news">5 riga</div>
                        <div class="news">6 riga</div>
                        <div class="news">7 riga</div>
                        <div class="news">8 riga</div>
                        <div class="news">9 riga</div>
                        <div...

CSS

* { margin: 0px; padding: 0px; }
			.clear { clear:both; }
			#content { width:450px; margin:100px auto; }
			.news { border:1px solid #000000; margin-bottom: 10px; }


			#right { margin-bottom:20px; }
			.slider-vertical { height:3px; }
			.maschera { width:450px; height:185px; overflow:hidden; position:relative; }
			.contenuti { position:absolute; top:0px; left:0px; width:450px; }
			
			.ui-slider-horizontal .ui-slider-handle{ top:-8px; }

			/* customizzazione */
			.slider-vertical
			{
				background:#999;
				border:1px solid #FFFFFF;
			}

			.slider-vertical > div
			{
				background:#333;
				border: 0;
				margin: 0 auto;
			}

			.slider-vertical > a
			{
				background:#333;
				border: 0;
				height:20px;
				width:20px;
				border-radius:20px;
			}
			.news{
				height:50px;
				background:#CCC;
				color:#666;
			}
			/* fine customizzazione */

JavaScript

function scroll(max_height,value) {
				var val = -1*(max_height - (max_height - value));
				
				
				$('.contenuti').css('top',val+'px');
			}

			$(function() {

				max_height = parseInt($('.contenuti').css('height')) - parseInt($('.maschera').css('height'));

				$slider = $(".slider-vertical").slider({
					orientation: "horizontal",
					range: "min",
					min: 0,
					max: max_height,
					value: 1,
					slide: function( event, ui ) {
						scroll(max_height,ui.value);
					}
				});

				$('.contenuti').bind('mousewheel', function(event, delta) {

					scrollDelta = -20;

					var value = parseInt($slider.slider('value'));
					value += (delta > 0 ? scrollDelta : -scrollDelta)
					if (value > max_height) value = max_height;
					else if (value < 0) value = 0;
					$slider.slider('value', value);
					scroll(max_height,value);
					return false;
				});
			});