Прокрутите div, если сосредоточиться на внутреннем div

Мне нужно сделать прокручиваемый div, прокручивать, даже если мышь находится на контенте (внутри прокручиваемого div), а не только рядом с ним (там, где оно пусто). Это то, что у меня есть до сих пор:

var main = document.getElementById('main-site');
var maxTop = main.parentNode.scrollHeight-main.offsetHeight;

main.parentNode.parentNode.onscroll = function() {
   main.style.top = Math.min(this.scrollTop,maxTop) + "px";
}

В Chrome все в порядке В IE8 + нормально (я знаю взлом) В Safari контент сильно дрожит, когда я прокручиваю, могу ли я исправить это? (Я хочу исправить это)

Рабочая скрипка → https://jsfiddle.net/8oj0sge4/6/

var main = document.getElementById('main-site');
var maxTop = main.parentNode.scrollHeight - main.offsetHeight;

main.parentNode.parentNode.onscroll = function() {
  main.style.top = Math.min(this.scrollTop, maxTop) + "px";
}
#wrapper {
  width: 100%;
  height: 1500px;
  border: 1px solid red;
  padding-top: 380px;
}
#wrapper .container {
  border: 1px solid green;
  width: 100%;
  height: 500px;
  overflow: scroll;
}
#wrapper .container-scroll {
  height: 1500px;
  width: 100%;
  border: 1px solid yellow;
  position: relative;
}
#wrapper .main {
  width: 200px;
  height: 500px;
  background: black;
  overflow: scroll;
  position: absolute;
  color: white;
  left: 50%;
  margin-left: -100px;
  margin-top: 10px;
}
<div id="wrapper">
  <div class="container">
    <div class="container-scroll">
      <div id="main-site" class="main">
        My goals is to make the div container scroll also when the mouse is hover this div in safari, in Google and IE8 i already know how to make work, but safari is shaking a lot!
      </div>
    </div>
  </div>
</div>

ОТВЕТЫ

Ответ 1

Я надеюсь, что эта демонстрация поможет вам сделать прокрутку содержимого div при наведении мыши и при выводе мыши из div.

<html>
</head>
<style>
.mydiv
{height: 50px;width: 100px; overflow-y: scroll; }
</style>

<script>
function loadpage()
{ document.getElementById('marquee1').stop();  }
function marqueenow()
{ document.getElementById('marquee1').start(); }
</script>

</head>
<body onload="loadpage()">
<marquee id="marquee1" class="mydiv" onmouseover="marqueenow()"     onmouseout="loadpage()" behavior="scroll" direction="up" scrollamount="10">
This is my test content This is my test content This is my test content This     is my test content This is my test content This is my test content This is my     test 

content This is my test content This is my test content This is my test     content This is my test content This is my test content This is my test content     This is my test content This is my test content This is my test content 
</marquee>
</body>
</html>

Ответ 3

Не 100% уверены, что вы делаете, но вы можете получить фиксированную позицию с помощью css "fixed". Он останется там, где вы его положили. Следующие css фиксируются в нижней части страницы.

.fixed {
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: auto;
}

Уже есть ответ на позицию прокрутки: Как получить позицию прокрутки с помощью Javascript?

Ответ 4

Я не знаю, важно это содержание, и я имею в виду, если он должен оставаться выбранным.

Если не очень хорошее решение было бы использовать #wrapper .main{ pointer-events: none; }, что означает, что контент не получит никаких событий от мыши, и он перейдет через него к следующему элементу за ним - в вашем случае свиток пойдет правильно #wrapper.

Ответ 5

Safari делает это, потому что у каждого браузера есть своя прокрутка. Если у вас есть фиксированный заголовок на телефоне, он действует упругий, и если вы делаете это на ПК, он действует нормально. Explorer прокручивается гладко, а Chrome прокручивается прямо до места без плавного перехода.

Ответ 6

Причина, по которой ваш #main-site является "перетягиванием", заключается в том, что браузер сохраняет "перерисовку" позиции этого элемента.

Один трюк для решения этого называется Функция отладки (вы также можете просмотреть его в других браузерах.) Основная идея заключается в том, чтобы задержать scroll event handler до очистите эти неиспользуемые обратные вызовы.

В вашем случае вы можете сделать что-то вроде этого:

main.parentNode.parentNode.onscroll = function(event) {
    debounce(offsetting, 10);
}

function offsetting() {
    main.style.top = Math.min(main.parentNode.parentNode.scrollTop,maxTop) + "px";       
}

function debounce(method, delay) {
    clearTimeout(method._tId);
    method._tId= setTimeout(function(){
        method();
    }, delay);
}

Если вы продолжаете видеть проблему смешивания, вы можете просто отредактировать параметр задержки (т.е. изменить 10 на 50). Недостатком этого является ваш элемент #main-site, который будет "обрезаться сверху" некоторое время, в зависимости от настроек задержки.

Ответ 7

Так как ваш код отлично работает на Chrome и IE, может быть ошибка в атрибуте scrollHeight или offsetHeight в Safari. Я рекомендую вам использовать getBoundingClientRect для расчета позиции элемента, поскольку этот метод является более надежным и точным.

var maxTop = main.parentNode.getBoundingClientRect().height - main.getBoundingCLientRect().height;