Lösungen ,scroll without scrollbars

scroll_without_scrollbars.php

Quell Code

 
 <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>

<style>
* {
  box-sizing: border-box;
}

.wrapper {
  width: 500px;
  height: 400px;
  border: 1px solid #000;
  padding: 20px;
  margin: 50px auto;
  
}

.wrapper .content {
  height: 100%;
  overflow: hidden;
}

.contenter {
  background-color: yellow;
  width: 100%;
}

.content {
  padding: 10px;
}
  
</style>
</head>
<body>
<div class="wrapper wrapper1">
  <div class="content">
    <div class="contenter contenter1">
      <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus asperiores aperiam quos nobis nulla dolores obcaecati, tempore culpa animi magni hic dicta fugiat molestias amet illum suscipit rerum dolor! Iste, quaerat! Sint inventore doloremque ab quam culpa iusto id, alias aliquid neque? Eum odit quos sit pariatur velit. Vel corporis esse velit iure dignissimos at cupiditate vitae labore, eos deleniti hic incidunt quae rerum, accusantium magnam? Dignissimos ipsam aspernatur odio iste labore velit voluptatem nihil minus rem fugit, consectetur quam inventore nostrum laudantium blanditiis quia at, quo quidem repellendus enim nulla, qui ratione cupiditate eius. Veniam asperiores aut nam iste similique dignissimos! Consectetur corporis veritatis, tenetur, ad laudantium laboriosam eaque rerum velit obcaecati cupiditate facilis autem expedita? Dolore fuga illum, consequatur minus vero amet saepe? Fugit consectetur eius, nostrum dignissimos quis quae ex ad dicta tenetur eligendi? Eveniet fuga tempore maxime voluptates et, explicabo animi sapiente veritatis reiciendis dolores facere architecto harum porro perferendis quae qui quas blanditiis ad quisquam excepturi inventore nobis rem. Nostrum architecto sit libero odit ratione porro, cupiditate a animi quaerat eaque doloremque assumenda quisquam? Repellendus iste consequatur ipsum provident non placeat natus voluptatibus dignissimos sapiente perspiciatis quod, fugit aut molestias nulla maxime tempora ratione velit repudiandae enim amet ipsam vel. Vero nihil odio consectetur hic veniam harum et non saepe ex obcaecati. Eligendi ipsum modi sint dicta molestiae! Earum, adipisci rem debitis iste corrupti tenetur, libero sequi, totam architecto praesentium accusantium qui quibusdam non optio! Alias eos beatae ducimus culpa nulla cumque ea accusamus sapiente. Rem doloremque aut, magnam distinctio officiis non perspiciatis dolor harum debitis quibusdam reprehenderit ab quisquam maxime dolorem a minus, dignissimos impedit nulla, mollitia iusto? Veniam illo, a facere, nesciunt sint blanditiis, dolores exercitationem dolore voluptatem odit odio nobis quam amet tempora repudiandae perspiciatis maiores atque est fugiat alias temporibus nisi quaerat repellendus consequatur. Dolor totam harum aut eligendi accusantium consequuntur nulla incidunt natus, aliquam excepturi repellendus, quis nemo recusandae consectetur numquam voluptates dolorem magni. Commodi illum nemo laborum laudantium at consectetur porro excepturi aliquid, sit eius amet voluptatem nobis et, laboriosam voluptas vitae quos mollitia doloribus dignissimos eos veniam. Aliquam veniam eos architecto magnam magni autem at numquam nemo molestias suscipit animi unde, iure optio nesciunt sequi quam ullam porro libero sunt itaque incidunt soluta consequuntur! Saepe quidem dicta, deserunt ullam maiores sapiente beatae aperiam magni, pariatur explicabo quam nisi qui itaque excepturi doloribus et nobis sit? Ratione dolorem perspiciatis unde quis ipsa? Sit dolorem consectetur nisi, amet tempore pariatur explicabo qui suscipit maiores maxime quod libero voluptatum veniam. Ea molestiae corporis excepturi repellat necessitatibus cupiditate earum beatae aperiam amet? Ducimus numquam necessitatibus ad asperiores quas quidem cupiditate in beatae earum dignissimos enim optio, nobis fuga ipsum hic odit rerum natus odio repellat dolor. Nulla, unde accusantium perferendis sit sunt deserunt fugiat sequi dolorem, asperiores corrupti ab quaerat natus sapiente. Aliquam, magni! Laboriosam, omnis quam. Architecto at placeat magni aperiam commodi mollitia rem vel, recusandae neque vero perferendis culpa, alias, veniam praesentium accusamus quis velit possimus hic repellendus! Amet aperiam ut fugiat ducimus rerum explicabo quibusdam id eligendi unde ex doloremque eveniet distinctio praesentium, reprehenderit deserunt sequi asperiores a assumenda commodi suscipit! Reprehenderit dolores dicta libero ea, recusandae aspernatur incidunt debitis quae sit maxime eveniet autem nisi, commodi officia. Optio harum totam quia recusandae sapiente nesciunt quidem soluta libero repudiandae quisquam. Laboriosam inventore pariatur eligendi commodi unde suscipit, quod, non aperiam quae, eum dicta dolorem nam? Voluptatem, at laudantium? Eius nobis molestiae vero temporibus dicta eveniet minus aut et qui minima quas porro, adipisci illo voluptate impedit laborum obcaecati voluptatibus asperiores cumque, at rerum deserunt ullam id! Vero placeat rerum natus blanditiis voluptates tempora obcaecati minus sapiente. Quis repudiandae sit ab? Sint atque sed eius error ab doloribus nemo illo praesentium quos labore minus autem aliquid dignissimos commodi sapiente totam quaerat tempora iusto molestiae rerum suscipit voluptatum, in nesciunt porro? Quis necessitatibus, harum atque eum dolorem totam officia debitis nihil eius ratione! Neque doloremque ipsum eos necessitatibus cumque voluptates corporis? Voluptas, cupiditate! Repellat vero obcaecati assumenda perferendis, suscipit corporis odit nostrum libero accusantium sed facilis quam quo autem minus porro optio amet minima, deleniti fugiat modi totam recusandae, cupiditate et quibusdam? Itaque expedita, placeat aliquam non unde recusandae ipsa, facere odio voluptatem temporibus ex consectetur quibusdam. Culpa expedita placeat at repellat labore quasi nam, minus perferendis. Accusamus nobis repellendus, excepturi natus animi voluptates, cumque aliquam rerum quae delectus distinctio. Id suscipit dicta, iste dolor tempora sed necessitatibus nisi possimus. In, ratione hic, quis eligendi repellat tempore explicabo officiis architecto tenetur, eveniet amet porro dolorem. Ratione aperiam corrupti itaque incidunt? Dolorem nam rem pariatur excepturi provident illo obcaecati esse vitae, ea rerum eveniet commodi animi, hic natus molestiae dignissimos ducimus voluptatem, possimus tempora debitis unde similique soluta harum. Fuga dolorem necessitatibus quam corrupti eveniet est fugit suscipit mollitia eius iste, consequuntur porro sit perferendis, odio esse laboriosam? Quaerat dicta debitis obcaecati hic modi reiciendis dignissimos voluptatum dolorem, non voluptatibus magnam est tempore nesciunt facilis blanditiis eos ducimus praesentium? Eos deleniti optio temporibus illum itaque, nam blanditiis laudantium asperiores sed minima id ab quam quidem cum quaerat voluptate sapiente veritatis pariatur officiis enim delectus alias explicabo? Quod sequi tempora deleniti enim odio quaerat sed voluptatum excepturi nulla, iure incidunt debitis nemo minima nesciunt ad! Eum voluptas maxime eius recusandae laudantium impedit unde ducimus! Voluptatum unde laboriosam praesentium natus quidem tenetur est numquam assumenda qui provident impedit, fugiat voluptatibus dolore, maxime ratione itaque voluptate at. Fugit, et fuga. Aperiam delectus est voluptatibus? Facilis quae laboriosam soluta repellat repellendus architecto doloremque officia! Quis corporis sed ipsa ipsam veniam odit, dolorem cumque pariatur officiis beatae amet veritatis a iusto modi vero adipisci alias maxime est consequuntur earum? Nam dicta repellat, ab sapiente, exercitationem deserunt enim in adipisci deleniti impedit, aperiam et excepturi ducimus harum? Aliquam deserunt obcaecati voluptates. Ipsum iusto iure, dolorem porro quaerat voluptatum aliquam asperiores sed reprehenderit natus a harum! Ipsam nam dolore tempore error aut rem similique dolorem ipsa magni sint sapiente, expedita eum alias aliquid tempora. Nostrum quisquam obcaecati assumenda pariatur.</div>

</div>
  </div>
  <script>
    
var scroll = wheelCounter();

$('.wrapper1').on('wheel', function(e) {
  e.preventDefault();
  var scrollData = scroll(e.originalEvent.wheelDelta, -($('.contenter1').outerHeight(true) - $('.content').outerHeight(true)));
  
  
  var scrollPercent = (scrollData) / ($('.contenter1').outerHeight(true) - $('.content').outerHeight(true));
  console.log(Math.round(scrollPercent*100));
  
  $('.contenter1').css({
    transform: 'translateY(' + scrollData + 'px)'
  })
  
});

function wheelCounter() {
  var startScroll = 0;
  return function(wheel, stop, whellSpeed) {
    if (typeof(whellSpeed) !== 'number') {
      whellSpeed = 120;
    }
    
    if (wheel < 0) {
      startScroll -= whellSpeed;
      if (startScroll < stop) {
        startScroll = stop;
      }
      
    } else {
      startScroll += whellSpeed;
      if (startScroll > 0) {
        startScroll = 0;
      }
    }
    
    return startScroll;
  }

}
    
  </script>
  </body>
  </html>